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

DllPlugin和DllReferencePlugin主要功能可以将第三方包单独打包,独立出来。避免进行二次打包。同时也对打包时间进行优化。
我们先使用new BundleAnalyzerPlugin()可以对包进行分析性能优化篇之打包优化-DllPlugin和DllReferencePlugin
在项目build.js中打印出时间:性能优化篇之打包优化-DllPlugin和DllReferencePlugin
因为是用node进行启动,所以直接webpack中配置stats是不可以的。接下我们看看优化事前的时间和包的分析:
性能优化篇之打包优化-DllPlugin和DllReferencePlugin性能优化篇之打包优化-DllPlugin和DllReferencePlugin
使用dllPlugin将react-dom,redux等单独打包:
先命名一个dll.config.js:
性能优化篇之打包优化-DllPlugin和DllReferencePlugin
再命名一个webpack.dll.conf.js文件:
性能优化篇之打包优化-DllPlugin和DllReferencePlugin
webpack配置里加上DllReferencePlugin配置:
性能优化篇之打包优化-DllPlugin和DllReferencePlugin
AddAssetHtmlPlugin可以将文件动态插入到html。
package.json里进行配置:
性能优化篇之打包优化-DllPlugin和DllReferencePlugin
经过打包之后:
先执行npm run dll,会多出文件:
性能优化篇之打包优化-DllPlugin和DllReferencePlugin
然后执行npm run build:
性能优化篇之打包优化-DllPlugin和DllReferencePlugin
性能优化篇之打包优化-DllPlugin和DllReferencePlugin
性能优化篇之打包优化-DllPlugin和DllReferencePlugin
从图中可以看出打包时间减少,也将主要资源进行了分包,多了others和react的包。
关于DllPlugin和DllReferencePlugin详细介绍可以移步webpack官网进行了解~~~