WebPack系列--开启HappyPack之后，再将项目打包速度缩短5秒

先看两组测试数据，第一组是没有使用DllPlugin的打包测试数据，测量三次取平均值是26.296s
(25.72+25.56+27.61)/3≈26.296s

 

第二组是使用了DllPlugin的打包测试数据，测量三次取平均值是20.586s
(20.62+21.31+19.83)/3≈20.586s 

 

 

打包体积：减少了 8.72M-4.8M=3.92M

没用动态库之前是8.72M

用了动态库之后是1.8M+2958K≈4.8M

 

减少的原因是避免了在业务代码中重复引入第三方工具包。

为什么会快?

我们的项目代码，可以分为第三方工具包和业务代码，第三方工具包一般比较成熟，用webpack打包编译过，无需每次项目构建时都再次打包。可以把这部分代码从剥离出去，通过外链script标签引入，每次构建，只打包业务代码。所以能缩短整体打包时间。

如何实现

要想实现这样的效果，你需要在现有项目的基础上，做如下配置：

第一步，安装依赖

yarn add -D assets-webpack-plugin clean-webpack-plugin webpack-bundle-analyzer