vue性能优化之Gzip压缩

Posted 2021-04-23 web科技

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