webpack打包优化之路

最近使用vue-cli和vux做的项目，打包后文件体积过大，300k开始进行优化。

优化1：使用CDN资源,减小服务器带宽压力

在html中引入cdn资源

修改 build/webpack.base.conf.js
image.png

优化2：按需加载三方资源，如iview,建议按需引入iview中的组件

优化3 使用webpack-bundle-analyzer 查看bundle中可以分析压缩后js的组成部分。

*安装
npm install webpack-bundle-analyzer -d
使用
修改 build/webpack.base.conf.js
引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

image.png

可以看到如下图片，根据分析再次进行优化

image.png

优化4 服务器压缩传输。我们使用的tomcat服务器，可以开启服务器压缩，服务器会自动将js、css等文件压缩后（压缩后为原体积的60%左右）传输，服务器接到后，进行解压。

配置方式
在config/server.xml中修改
<Connector port="8082" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" executor="tomcatThreadPool" URIEncoding="utf-8" compression="on" compressionMinSize="10240" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain" />
web.xml中增加
<init-param> <param-name>sendfileSize</param-name> <param-value>400</param-value> </init-param>
超过10k 小于400k的js css 等会被压缩传送