vue性能优化之Gzip压缩

3,248 阅读1分钟

1.安装依赖:

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

npm install --save-dev compression-webpack-plugin@1.1.12

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,效果还是可以的。