通过webpack打包后我们会发现vendor.js会非常大,而且打包也会很慢,因为把依赖库里面的资源都打包到vendor.js里了,而且每次打包都会去重新编译。而我们现在用DllPlugin和DllReferencePlugin主要是把我们引用的依赖库提取出到static
1、创建build/webpack.dll.conf.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: {
//填写需要提取出来的依赖包
//如果有些依赖包在index.html页面引入了cdn了就无需再引入了,否则会打包进js文件中,在页面重复引入代码。
vendor: ['vue','vue-router']
},
output: {
path: path.join(__dirname, '../static'),
filename: 'dll.[name].js',
library: '[name]'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '../', '[name]-manifest.json'),
name: '[name]'
})
]
}
2、在package.json 下配置
"scripts": {
"dll": "webpack -p --progress --config build/webpack.dll.conf.js"
}
3、生成文件
通过
npm run dll
生成
- 根目录下生成vendor-manifest.json
- static下生成dll.vendor.js
4、在webpack.base.conf.js 下引入
const manifest = require('../vendor-manifest.json')
....
plugins: [
//把dll的vendor-manifest.json引用到需要的预编译的依赖
new webpack.DllReferencePlugin({
manifest
})
]
5、在index.html底部加上
<script src="./static/dll.vendor.js"></script>
就可以了
参考链接:
网友评论