性能优化篇之打包优化-DllPlugin和DllReferencePlugin
DllPlugin和DllReferencePlugin主要功能可以将第三方包单独打包,独立出来。避免进行二次打包。同时也对打包时间进行优化。
我们先使用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官网进行了解~~~