3分钟解决webpack打包体积过大的问题

问题

VUE多页面项目，使用webpack3打包，里面用到了echart，打包完5M~9M不等，看哭了有木有，赶紧

寻找过大的包的工具

webpack-bundle-analyzer

Visualize size of webpack output files with an interactive zoomable treemap.

安装

npm install --save-dev webpack-bundle-analyzer

使用

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {

plugins: [

new BundleAnalyzerPlugin()

]

}

上面生成的报告里有3种尺寸大小，定义如下：

stat

这个大小是在进行压缩等转换之前的输入文件大小；它叫做stat大小，是因为它是从webpack的[stat](https://webpack.js.org/configuration/stats/)对象里得到的。

parsed

This is the "output" size of your files. If you're using a Webpack plugin such as Uglify, then this value will reflect the minified size of your code.

这个是你的文件最终的输出的尺寸大小。如果你正在使用Uglify等插件，这个值将会是你代码打包的最小尺寸。

gzip

This is the size of running the parsed bundles/modules through gzip compression.

这个大小是你的包经过gzip压缩后的大小

优化的方法

1. 研究了下webpack devtools选项

生产环境将devtool设置成false，包体积瞬间减小了一半。

2. echart本身打包问题

3. 使用Uglify插件，启动gzip

从webpack-bundle-analyzer 对我的项目生成的报告可以看出，添加Uglify等压缩插件，可以将打包的体积减少到原来的30%，再经过gzip，打包的体积可变为原来的10%左右。