dllplugin 动态链接库，其实就是缓存，即事先把常用但又构建时间长的代码提前打包好，（例如：react、react-dom），叫dll，后面再打包的时候就跳过原来的未打包代码，直接用dll，这样一来，构建时间就会缩短，提高webpack打包速度。
即用空间换时间。
image.png
第一步：
// 文件目录：configs/webpack.dll.js
'use strict';
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'production',
entry: {
react: ['react', 'react-dom'],
},
// 这个是输出 dll 文件
output: {
path: path.resolve(__dirname, '../dll'),
filename: '_dll_[name].js',
library: '_dll_[name]',
},
// 这个是输出映射表
plugins: [
new webpack.DllPlugin({
name: '_dll_[name]', // name === output.library
path: path.resolve(__dirname, '../dll/[name].manifest.json'),
})
]
};
第二步：
// package.json
{
"scripts": {
"build:dll": "webpack --config configs/webpack.dll.js",
},
}
第三步：webpack.config.js
const path = require('path');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); // 顾名思义，把资源加到 html 里，那这个插件把 dll 加入到 index.html 里
const webpack = require('webpack');
module.exports = {
// ......
plugins: [
new webpack.DllReferencePlugin({
// 注意: DllReferencePlugin 的 context 必须和 package.json 的同级目录，要不然会链接失败
context: path.resolve(__dirname, '../'),
manifest: path.resolve(__dirname, '../dll/react.manifest.json'),
}),
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, '../dll/_dll_react.js'),
}),
]
}
AutoDllPlugin
autodll-webpack-plugin简化dllplugin配置。
const path = require('path');
const AutoDllPlugin = require('autodll-webpack-plugin'); // 第 1 步：引入 DLL 自动链接库插件
module.exports = {
// ......
plugins: [
// 第 2 步：配置要打包为 dll 的文件
new AutoDllPlugin({
inject: true, // 设为 true 就把 DLL bundles 插到 index.html 里
filename: '[name].dll.js',
context: path.resolve(__dirname, '../'), // AutoDllPlugin 的 context 必须和 package.json 的同级目录，要不然会链接失败
entry: {
react: [
'react',
'react-dom'
]
}
})
]
}
抛弃 DLL：Vue & React 官方的共同选择
因为 Webpack 4 的打包性能足够好的，dll 没有在 Vue ClI 里继续维护的必要了。
比 DLL 更优秀的插件HardSourceWebpackPlugin
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
// ......
plugins: [
new HardSourceWebpackPlugin() // <- 直接加入这行代码就行
]
}
参考资料：
https://www.cnblogs.com/skychx/p/webpack-dllplugin.html
