前端开发性能优化 gzip压缩

vue-cli项目打包，js和css都会被webpack打包，但是不经过压缩的包，可能有好几兆，首页下载速度极慢，影响体验，可以考虑gzip压缩。（亲测，一个chunk.js 977k ，压缩到了 155k）

接下来看要如何进行gzip压缩配置

gzip压缩方式

1.静态压缩

由于项目是通过vue-cli搭建的，所以就直接通过webpack来配置了。

如果没有默认安装compress-webpack-plugin插件，请先安装。

npm i -D compress-webpack-plugin

插件地址：https://www.npmjs.com/package/compress-webpack-plugin 上面有文档

const CompressWebpackPlugin = require('compress-webpack-plugin')
if (config.build.productionGzip) { //判断是否需要gzip压缩，可以使用env环境变量判断，例如本地dev不用压缩
  webpackConfig.plugins.push(
    new CompressWebpackPlugin ({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' + 'js|css' + ')$' // 压缩的文件类型，还可以加html等（js|css|html）
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

然后就可以npm run build打包了，打包后会生成类似 ***.js.gz的文件。

然后就可以把整个项目丢到服务器上了。

但这时候服务器还是不支持gzip的。因此，我们要来简单的配置一下。

我用的是nginx，就只讲nginx的配置了，打开conf/ngxin.conf

在http、server、location下加以下代码，详情点击nginx文档。

gzip_static on;
gzip_http_version   1.1;
gzip_proxied        expired no-cache no-store private auth;
gzip_disable        "MSIE [1-6]\.";
gzip_vary           on;

最后 nginx -s reload 重启。

2.动态压缩

了解完静态压缩，再简单的了解一下动态压缩吧。

这里就直接通过修改nginx.conf来配置动态压缩了，文档。

gzip             on;
gzip_min_length  1000;
gzip_proxied     expired no-cache no-store private auth;
gzip_types       text/plain application/xml;

最后重启nginx就完事了。

动态压缩的缺点：压缩过程占用cpu的资源，压缩比越高cpu占用越高，所以请配置合适的压缩比。

经过上面的工作，加载速度应该已经提升很多了。