前端优化之开启 Gzip 压缩

我其实一点也不懂，上网去查看别人都没写前端怎么做，就很郁闷。自己尝试一番才知道为何没人写前端的操作步骤，因为非常简单——生成 gz 文件，上传服务器即可。所以为了避免有人和我一样懵逼，索性记录下来以供参考。开门见山直接说操作方法：

我刚好用的是 vue boilerplate 来做开发，所以直接改配置就能做到压缩：

1. 找到 config/index.js
2. 找到 productionGzip: false
3. 将 false 改为 true
4. npm i -D compression-webpack-plugin
5. 重新允许 npm run build
6. 可以看到生成了一些 gz 文件
7. 其他都不用变，把原来的代码和新生成的 gz 文件一并提交到服务器上就行了
8. 找运维给服务器开启 gzip 即可

注：webpack.prod.conf.js 里应该要有以下这段代码：

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}