webpack之DllPlugin详细解析

功能：DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。-webpack官网

何时使用：当有依赖包较大时，因依赖包不常改动（一般基本不会去改），如：react,axios,antd等，如果不将其分离打包，则每次打包时均会被打包，影响打包速度。

先看效果：

分离前：（打包时间：12.9s,包大小：6.48M）

分离后：（打包时间：8.69s,包大小：1.49M）

 

如上，提升速度效果显著。

基本配置见官网链接地址：https://www.webpackjs.com/plugins/dll-plugin/#dllplugin

重点圈画及补充：

1、要实现打包分离，需涉及两个插件（DllPlugin和DllReferencePlugin），两个打包文件（webpack.dll.config.js-对应DllPlugin插件和webpack.config.js-对应DllReferencePlugin插件，文件名称自定义）。

webpack.dll.config.js文件目的：

      1.1、分离依赖包；

      1.2、生成manifest.json映射文件，供 DLLReferencePlugin 映射到相关的依赖上去的。

2、webpack.dll.config.js中，output.library名称需和DllPlugin插件定义的name保持一致；

3、webpack.dll.config.js中，output.libraryTarget名称一般取默认'var'，如需修改，需保持和webpack.config.js文件中DllReferencePlugin插件中的sourceType保持一致。但经本人验证，output.libraryTarget值不可为commonjs2及umd，其他未验证。

4、重要的重中之重！！！必须在最终的html文件中插入引用。引用webpack.dll.config.js打包生成的dll文件。如果使用了插件html-webpack-plugin，则可用插件html-webpack-include-assets-plugin将依赖包打包文件引入。否则会报类似“_dll_react is not defined”之类的错误。

具体代码配置见附件。

https://download.csdn.net/download/weixin_43664308/11578548

https://download.csdn.net/download/weixin_43664308/11578552