性能优化篇之打包优化-DllPlugin和DllReferencePlugin

什么是DLL?
DLL(Dynamic Link Library)文件为动态链接库文件,在Windows中,许多应用程序并不是一个完整的可执行文件,它们被分割成一些相对独立的动态链接库,即DLL文件,放置于系统中。当我们执行某一个程序时,相应的DLL文件就会被调用。
举个例子:很多产品都用到螺丝,但是工厂在生产不同产品时,不需要每次连带着把螺丝也生产出来,因为螺丝可以单独生产,并给多种产品使用。在这里螺丝的作用就可以理解为是dll。
为什么要使用Dll?
通常来说,我们的代码都可以至少简单区分成业务代码和第三方库。如果不做处理,每次构建时都需要把所有的代码重新构建一次,耗费大量的时间。然后大部分情况下,很多第三方库的代码并不会发生变更(除非是版本升级),这时就可以用到dll:把复用性较高的第三方模块打包到动态链接库中,在不升级这些库的情况下,动态库不需要重新打包,每次构建只重新打包业务代码。

还是上面的例子:把每次构建,当做是生产产品的过程,我们把生产螺丝的过程先提取出来,之后我们不管调整产品的功能或者设计(对应于业务代码变更),都不必重复生产螺丝(第三方模块不需要重复打包);除非是产品要使用新型号的螺丝(第三方模块需要升级),才需要去重新生产新的螺丝,然后接下来又可以专注于调整产品本身。
我们先使用new BundleAnalyzerPlugin()可以对包进行分析在这里插入图片描述
在项目build.js中打印出时间:在这里插入图片描述
因为是用node进行启动,所以直接webpack中配置stats是不可以的。接下我们看看优化事前的时间和包的分析:
在这里插入图片描述在这里插入图片描述
使用dllPlugin将react-dom,redux等单独打包:
先命名一个dll.config.js:
在这里插入图片描述
再命名一个webpack.dll.conf.js文件:
在这里插入图片描述
webpack配置里加上DllReferencePlugin配置:
在这里插入图片描述
AddAssetHtmlPlugin可以将文件动态插入到html。
package.json里进行配置:
在这里插入图片描述
经过打包之后:
先执行npm run dll,会多出文件:
在这里插入图片描述
然后执行npm run build:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
从图中可以看出打包时间减少,也将主要资源进行了分包,多了others和react的包。
关于DllPlugin和DllReferencePlugin详细介绍可以移步webpack官网进行了解~~~

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值