DllPlugin和DllReferencePlugin提供分离包的方式可以大大提高构建时间性能。主要思想在于，将一些不做修改的依赖文件，提前打包，这样我们开发代码发布的时候就不需要再对这部分代码进行打包。从而节省了打包时间。
一、没分离打包之前，打包结果及速度如下：
没有分开打包第三方（耗时：4.7s）
没有分开：第三方打包进app.[hash:8].js
二、开始分离：
- 创建文件 webpack.config.dll.js ，进行相关配置：
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
vendor: [ // 提前打包一些基本不怎么修改的文件
'react',
'react-dom',
'antd'
]
},
output: {
filename: 'public/dll/[name].dll.js',
path: path.resolve(__dirname, '../dist'),
library: '_dll_vendor' // 暴露出的全局变量名
// 打包出来的manifest.json和dll.js的n//可选 暴露出的全局变量名
// vendor.dll.js中暴露出的全局变量名，主要是给DllPlugin中的name使用，
// 故这里需要和webpack.DllPlugin中的`name: '_dll_vendor',`保持一致。
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '../dist/public/dll/vendor-manifest.json'),
name: '_dll_vendor' // 公开的dll函数的名称，和output. library保持一致即可
})
]
};
- 运行package.json里添加的脚本：
npm run build:dll，单独打包第三方结果如下：
package.json："build:dll": "webpack --config webpack/webpack.config.dll.js"
单独打包第三方（耗时：2.8s） - 上面已经将第三方打包出来了，那么pro配置文件就不需要打包第三方依赖了，如下配置：
plugins: [
// 每一次打包都会删除dist文件夹，但是现在需要保留dll文件夹，不需要重复打包
new CleanWebpackPlugin(['public', 'index.html'], {
root: path.resolve(__dirname, '../dist'),
exclude: ['dll'] // clean时，不删除dll文件夹
}),
// webpack读取到vendor的manifest文件对于vendor的依赖不会进行编译打包
new webpack.DllReferencePlugin({
manifest: require(path.resolve(__dirname, '../dist/public/dll/vendor-manifest.json'))
}),
// 将第三方打包文件vendor.dll.js动态添加进html里
new HtmlWebpackIncludeAssetsPlugin({
assets: ['public/dll/vendor.dll.js'],
append: false // false 在其他资源的之前添加 true 在其他资源之后添加
})
]
注意（1）：由于版本不一样，导致传参不一样；将clean-webpack-plugin版本将到v1.0.1，因为最新版本只支持一个对象传参，不支持现在的需求（删除时不删除dll文件，需要低版本支持两个传参方式）。
注意（2）：选用插件的对比
- 直接运行
npm run build即可，结果如下：
分开打包，不删除dll文件（耗时：3.8）
分开后：第三方就有单独的文件夹，并且app.[hash:8].js里不存在第三方库
-
最后，放一下package.json的scripts配置：
可见，提升速度确实快了，不过后面还需继续不断提升打包速度。
