- webpack.optimize.LimitChunkCountPlugin
当你在编写代码时,可能已经添加了许多代码分离点(code split point)来实现按需加载(load stuff on demand)。在编译完之后,你可能会注意到有一些很小的 chunk - 这产生了大量 HTTP 请求开销。幸运的是,此插件可以通过合并的方式,后处理你的 chunk,以减少请求数。
- UglifyJS 是一个js 解释器、最小化器、压缩器、美化器工具集(parser, minifier, compressor or beautifier toolkit)
- 使用交互式可缩放树图可视化webpack输出文件的大小。
该模块将帮助您:
真正了解捆绑包中的内容
找出最大的模块是什么
查找错误到达的模块
优化它!
最好的事情是它支持小型捆绑包!它解析它们以获取捆绑模块的实际大小。并且还显示了他们的压缩大小!
chainWebpack:config => {
//自动加载 jquery
config.plugin('provide').use(webpack.ProvidePlugin, [{
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}]);
//压缩
if(env=="production"){
console.info(env);
config.plugin('uglifyJs').use(UglifyJsPlugin,[{
uglifyOptions: {
compress: {
drop_debugger: true,
drop_console: true // //生产环境自动删除console
},
}
}]);
//生成打包文件-报告
config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{
analyzerMode: 'static',
}]);
config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin,[{
maxChunks:15, // 必须大于或等于 1
minChunkSize: 10000
}])
}
},