vlambda博客
学习文章列表

vue性能优化之Gzip压缩

1.安装依赖:

compression-webpack-plugin是一个非常好用的压缩插件,适用于vue-cli版本2以上, 安装的时候一定要带上版本号, 否则的话,版本太高 可能会报错。

npm install --save-dev [email protected]

2.修改config下的index.js,将 productionGzip 改为true


3.修改build下的 webpack.prod.conf.js,将assert 改为fileName,不修改的话会报错。


4.配置ngnix

 gzip on; 
gzip_buffers
4 16k;
gzip_comp_level
5;
gzip_types text
/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

至此,配置就完成。

5.我们打包一下。可以看到所有的文件都生成了一个同名的gz文件,最大的文件大小直接从1.7M 压缩到300k,效果还是可以的。