通过webpack打包后我们会发现vendor.js会非常大,而且打包也会很慢,因为把依赖库里面的资源都打包到vendor.js里了,而且每次打包都会去重新编译。而我们现在用DllPlugin和DllReferencePlugin主要是把我们引用的依赖库提取出来到static,下次需要时直接去static提取到dist,无需重新编译,只需要更新我们修改过的js即可。
首先新建一个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]'
})
]
}
在package.json
下配置
"scripts": {
"dll": "webpack -p --progress --config build/webpack.dll.conf.js"
},
通过npm run dll
就可以在根目录下生成vendor-manifest.json
,static下生成dll.vendor.js
接下来通过webpack.base.conf.js
下引入
const manifest = require('../vendor-manifest.json')
....
plugins: [
//把dll的vendor-manifest.json引用到需要的预编译的依赖
new webpack.DllReferencePlugin({
manifest
})
]
我们在index.html,在底部加上 就可以了
=> 优化(防止编译后的文件缓存,同时能够自动在index.html中引用)
assets-webpack-plugin
使用Webpack时,您可能想要生成包含生成哈希的包(用于缓存清除)。该插件会输出一个带有生成资源路径的json文件,以便您可以从其他位置找到它们。
安装:
npm install assets-webpack-plugin –save-dev
在build/webpack.dll.conf.js
导出的文件文件加上hash
const path = require('path')
const webpack = require('webpack')
const package = require('../package.json')
const AssetsPlugin = require('assets-webpack-plugin')
module.exports = {
entry: {
//读取package.json里的依赖,normalize.css除外,打包会报错
//如果使用了chrome的vue-devtool,那打包的时候把vue也排除掉,因为压缩过的vue是不能使用vue-devtool的
vendor: Object.keys(package.dependencies).filter((item) => {
return item.indexOf('normalize') < 0 && item != 'vue'
})
},
output: {
path: path.join(__dirname, '../static'),
filename: 'dll.[name]_[hash:6].js',
library: '[name]_[hash:6]'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '../', '[name]-manifest.json'),
name: '[name]_[hash:6]'
}),
new AssetsPlugin({
filename: 'bundle-config.json',
path: './'
})
]
}
在webpack.dev.conf.js
:
const bundleConfig = require("../bundle-config.json")
...
plugins: [
new HtmlWebpackPlugin({
// 加载dll文件
vendorJsName: bundleConfig.vendor.js,
}),
]
在webpack.prod.conf.js
:
const bundleConfig = require("../bundle-config.json")
...
plugins: [
new HtmlWebpackPlugin({
// 加载dll文件
vendorJsName: bundleConfig.vendor.js,
}),
]
最后在index.html
<script src="./static/<%= htmlWebpackPlugin.options.vendorJsName %>">script>
其中HtmlWebpackPlugin
支持ejs模板语法。
参考: