怎样令webpack的构建加快十倍,DllPlugin的用法
发布网友
发布时间：2022-04-26 08:58
我来回答
共1个回答
热心网友
时间：2022-04-20 16:17
安装webpack、React、react-dom
npm install --save-dev webpack
npm install --save-dev react
npm install --save-dev react-dom123123
先建立三个文件
webpack.dll.config.js 文件
const path = require('path');
const webpack = require('webpack');
mole.exports = {
entry: {
vendor: ['react', 'react-dom']
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].dll.js',
/**
* output.library
* window.${output.library}に定义される
* 今回の场合、`window.vendor_library`になる
*/
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
/**
* path
* manifestファイルの出力先
* [name]の部分はentryの名前に変换される
*/
path: path.join(__dirname, 'dist', '[name]-manifest.json'),
/**
* name
* どの空间（global変数）にdll bundleがあるか
* output.libraryに指定した値を使えばよい
*/
name: '[name]_library'
})
]
};1234567891011121314151617181920212223242526272829303132333412345678910111213141516171819202122232425262728293031323334
webpack.config.js 文件
const path = require('path');
const webpack = require('webpack');
mole.exports = {
entry: {
'dll-user': ['./index.js']
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js'
},
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
/**
* manifestファイルをロードして渡す
*/
manifest: require('./dist/vendor-manifest.json')
})
]
};123456789101112131415161718192021123456789101112131415161718192021
index.js 文件
var React = webpack --config webpack.dll.config.js('react');
var ReactDOM = require('react-dom');
console.log("dll's React:", React);
console.log("dll's ReactDOM:", ReactDOM);12341234
建立后文件后 执行
webpack --config webpack.dll.config.js11
将会在当前目录生成dist目录，该目录下面的文件有 vendor.dll.js、vendor-manifest.json
再执行
webpack --config webpack.config.js11
将会在当前目录生成dist目录，该目录下面当前的文件有 vendor.dll.js、vendor-manifest.json、vendor.dll.js
现在，我们创建一个测试文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./dist/vendor.dll.js"></script>
</head>
<body>
<script type="text/javascript" src="./dist/dll-user.bundle.js"></script>
</body>
</html>123456789101112123456789101112
打开这个index.html文件，使用chrome按F12调试，打开console选项卡，将会看到类似
Download the React DevTools and use an HTTP server (instead of a file: URL) for a better development experience: https://fb.me/react-devtools
dll-user.bundle.js:56 dll's React: Object {Children: Object, PropTypes: Object, DOM: Object, version: "15.3.2"}
dll-user.bundle.js:57 dll's ReactDOM: Object {version: "15.3.2"}1234512345
的内容。则测试成功。
原文还提及构建时的缓存。
请转脚步到原文。
webpack.config.js文件中的下面代码是重点。
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
/**
* manifestファイルをロードして渡す
*/
manifest: require('./dist/vendor-manifest.json')
})
]123456789123456789
如果去除掉，生成速度将会慢很多倍。主要原因是打包的时候，将react、react-dom等等等等 的插件都塞到一个包里面，不慢才怪。
要是在本地开发调试的时候，没改一下bug就得等很久很久的话，那也不太划算。
webpack管理模块的确是挺方便的，不过我还就觉得不要都打包在一个js上面。
上面的例子中的dist就是生产环境引用的js了。
比如我来说，我会每个网页的引用的js都可能不同，所以我打包时也不会将所有js打包到一个上面。
