介绍
在用 webpack
打包的时候,对于一些不经常更新的第三方库,比如 Vue
, React
,lodash
等,我们希望能和自己的代码分离开,webpack 社区有两种方案
- CommonsChunkPlugin
- DLLPlugin
对于 CommonsChunkPlugin
,webpack 每次打包实际还是需要去处理这些第三方库,只是打包完之后,能把第三方库和我们自己的代码分开。而 DLLPlugin
则是能把第三方代码完全分离开,即每次只打包项目自身的代码。Dll这个概念是借鉴了Windows系统的dll,一个dll包,就是一个纯纯的依赖库,它本身不能运行,是用来给你的app引用的。
配置 DllPlugin (基于webpack 3.x)
第一步:新建webpack.dll.config.js文件
/build 文件夹下
- webpack.base.conf.js
- webpack.dll.conf.js (新建)
在 /build 文件夹下新建 webpack.dll.conf.js
const path = require('path');
const webpack = require('webpack');
const package = require('../package.json');
module.exports = {
entry: {
vendor: Object.keys(package.dependencies).filter((item) => {
// 全部
return item !== ''
})
// vendor:['vue-router','vuex','vue/dist/vue.common.js','vue/dist/vue.js','vue-loader/lib/component-normalizer.js','vue']
},
output: {
path: path.join(__dirname, '../static/js'),
filename: '[name].dll.js',
library: '[name]_library' // vendor.dll.js中暴露出的全局变量名
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
第二步:在 package.json 中配置命令
"scripts": {
...
"build:dll": "webpack --config build/webpack.dll.conf.js"
}
第三步: 执行 npm run build:dll 命令
-
生成 vendor.dll.js 和 vendor-manifest.json
打包dll的时候,Webpack会将所有包含的库做一个索引,写在一个manifest文件中,而引用dll的代码(dll user)在打包的时候,只需要读取这个manifest文件,就可以了。
-
在 index.html 引入 vendor.dll.js
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="./static/js/vendor.dll.js"></script>
</body>
- vendor-manifest.json 的内容大概如下:
{
"name": "vendor_library",
"content": {
"./node_modules/core-js/modules/_export.js": {
"id": 0,
"meta": {}
},
...
}
第四步: 在 webpack.base.config.js 中通过 DLLReferencePlugin 来使用 DllPlugin 生成的 DLL Bundle
const webpack = require('webpack');
module.exports = {
entry: {
app: ['./src/main.js']
},
module: {
...
}
// 添加DllReferencePlugin插件
plugins: [
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, '..'),
manifest: require('./vendor-manifest.json')
}),
]
}
先执行 npm run build:dll(6s左右), 在执行 npm run build 节省大概 30% 的时间。