DllPlugin提高webpack编译速度的详细说明

一、前言

DllPlugin和DllReferencePlugin提供了一种方法，可以通过这种方法拆分包，从而显著提高构建时性能。

将DllPlugin与DllRefrencePlugin插件相结合，可以将需要生产的捆绑文件进行拆解打包，完全可以加快webpack的打包速度，从而大大减少开发过程中的构建时间。

二、建设效果

结论一：用DllPlugin和DllRefrencePlugin构建可缩短构建时间50% ~ 70%。

请参考演示：dllplugin-演示

2.1使用DllPlugin前的构建速度

条目文件main.js引入了一个jQuery

文件和图表的打包需要2.3s

2.2使用DllPlugin后的构建速度

使用插件后，打包需要0.6s，单次比较时间减少73%！2.3如何验证DLLPlugin已经生效

比较以上两幅图中打包的模块列表，图2有不同的输出行：

[0]已委派。/src/components/jquery.js来自dll-reference vendor _ 57c 12 DDC 8d 9774596525 42字节{ 0 }[已构建]

这表明jQuery模块在这个打包过程中没有被重新打包，而是由vendor _ 57c 12 DDC 8d 9774596525直接表示。

第三，开始

DllPlugin原理图：

3.1配置webpack.dll.config.js封装静态公共资源

3.1.1定义网络包

为了减少空间，仅发布关键配置内容，并详细访问dllplugin-demo:

//web pack . dll . config . js module . exports={ entry : {//定义入口文件vendor . jsvendor 3360[path . resolve(src，' js '，' vendor.js')]用于打包程序中的公共文件。}，Plugins :[新webpack.dll插件({//清单缓存文件请求上下文(默认为webpack执行环境上下文)context: process.cwd()，//manifest . JSON文件路径：path.join的输出位置(src，' js '，' dll '，'[name]-manifest.json ')，//定义函数名name 3360 '[name]_[hash]' })]} 3]

配置完webpack.dll.config.js文件后，在vendor.js中声明项目程序中引用的静态公共资源

//vendor.js//在项目目录中引入用户自定义的公共资源(可以在配置中声明别名映射关系)并导入‘jquery’；//或导入npm包资源//导入' Vue '；3.1.3静态公共资源打包

//cross-env模块需要安装cross-env node _ env=production web pack-config web pack . dll . config . js-colors-display-modules。根据webpack.dll.config.js，将在指定位置生成vendor.dll.js文件。

3.2配置网络包入口文件

生成静态公共资源vendor.dll.js后，下一步是关联门户文件中的引用，这项工作由DllRefrencePlugin完成。

3.2.1在网络包中关联引用

//web pack . config . js module . exports={ entry : {//项目条目文件' app' :path.resolve (src，' js '，' main.js')}，Plugins: [//dllPlugin关联配置new webpack . dllrreference plugin({//与dll.config中dllPlugin的上下文一致，context3360process.cwd()，//由dll进程生成的清单文件manifest : require(path . join(src，')。

//如果厂商已经引用了main.js//介绍的公共模块，那么编译时将直接使用‘jquery’中的静态文件vendor.dll.js import $进行编译。console.log($)//从“Vue”导入Vue；//console.log(Vue)的引入方式和平时一样。

3.2.3项目模板中引用了公共静态资源

最后一步是将vendor.dll.js注入模板

！-index . html-script type=' text/JavaScript ' src=' http :/src/js/dll/vendor . dll . js '/script这样，静态公共资源的构建就不会在接下来的本地开发(dev)过程和在线构建过程中重复，大大减少了我们的构建时间。

结论

以上是对webpack(第4版)使用的简要总结，对大家的学习有帮助，支持我们。