前端优化之开启 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
    })
  )
}