vue前端性能优化开启gzip压缩和nginx配置设置

以下配置在Vue-cli框架上进行
1、找到config/index.js下，

// Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],

将productionGzip由false改为true，表示开启gzip打包压缩，看注释，发现需要安装一个compression-webpack-plugin
摸摸度娘后发现直接安装有坑，所以，下一步

2、修改build/webpack.prod.conf.js文件中，asset选项无效，要改成filename

 webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      // asset: '[path].gz[query]',   // 就是她这个妖媚
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )

3、再安装那个包包，有人说高版本错误，低版本没事，不想折腾了，直接低版本吧，安装v1.1.2

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

4、再次运行npm run build打包，打包文件中就由了gzip文件了，前端的工作算结束了。接下来，帮后端同学修改一下nignx配置

5、在后台nignx配置文件，nignx.config文件中，开启gzip，添加配置

gzip                    on;
gzip_http_version       1.1;        
gzip_comp_level         5;
gzip_min_length         1000;
gzip_types text/csv text/xml text/css text/plain text/javascript application/javascript application/x-javascript application/json application/xml;

啥意思呢，怎么这么多，单纯的gzip设置为on，发现有些压缩了，有些没有，

• gzip_http_version设置http最低版本，默认是1.0，修改为1.1
• gzip_comp_level压缩级别，级别越高压缩率越大，当然压缩时间也就越长，默认值1，取值1-9
• gzip_min_length设置允许压缩的页面最小字节数，Content-Length小于该值的请求将不会被压，缩默认值:0，当设置的值较小时，压缩后的长度可能比原文件大，建议设置1000以上
• gzip_types 要采用gzip压缩的文件类型(MIME类型)，默认值:text/html(默认不压缩js/css)

最重要的就是gzip_types玩意啦，不然只压缩heml文件，我折腾了大半天，你就给我看这个？

6，最后一步，重启nignx服务器，
在这个服务器文件夹目录执行命令行nignx -s reload重启服务器就好了。

ok，到此结束！

老规矩，推荐一篇好文章，参考
前端必备的 Nginx 知识： https://www.jianshu.com/p/cf90320102f9