前端優化之開啓 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
    })
  )
}