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%左右。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180623G0Z5WJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券