1. 在项目中引入打包后的dll文件:
在项目中注入第三方的包打包
(1). vue.config.js配置如下:
const dllReference = (config) => {
config.plugin('vendorDll')
.use(webpack.DllReferencePlugin, [{
context: __dirname,
manifest: require('./public/vendor/vendor-manifest.json')
}]);
// 这里是把相关文件引用入到html模板中
config.plugin('addAssetHtml')
.use(AddAssetHtmlPlugin, [
[
{
filepath: require.resolve(path.resolve(__dirname, 'public/vendor/vendor_dll.js')),
outputPath: 'vendor',
publicPath: 'vendor'
}
]
])
.after('html')
};
module.exports = {
...
// 方法一:实战
chainWebpack(config) {
dllReference(config)
}
// 方法二
configureWebpack: {
plugins: [
// 插入dll json
new webpack.DllReferencePlugin({
context: process.cwd(),
// 路径要与webpack.dll.config.js中对应
manifest: require('./public/vendor/vendor-manifest.json')
})
]
}
}
①. 告诉webpack哪些文件已被预编译,构建过程中忽略这些已预编译的文件.
(2). public/index.html中加载生成的dll文件(不推荐):
<script src="./vendor/vendor.dll.js"></script>
①. 经过上面的配置,公共库提取出来了,编译速度快了,不引用生成的dll文件,网页是不能正常工作的.
②. 手工插入script不太优雅.
(3). 自动引入生成的dll文件(推荐):
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
module.exports = {
...
new HtmlWebpackPlugin({
template: 'index.html',
}),
configureWebpack: {
plugins: [
......
// 将dll注入到生成的html模板中
new AddAssetHtmlPlugin({
// dll文件位置路径
filepath: path.resolve(__dirname, './public/vendor/*.js'),
// dll引用路径,注入到html中的路径
publicPath: './vendor',
// dll最终输出的目录
outputPath: './vendor'
})
]
}
}