vue-cli 3.0 開啟 Gzip 方法

vue.config.js

const path = require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  configureWebpack: config => {
    if (isProduction) {
      config.plugins.push(new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        })
      )
    }
  }
}

 

注意這里使用的是 compression-webpack-plugin 2.0.0，如果使用1.x 可能需要指定 assets 選項，2.0 改選項改為了 filename，並且可以省略

 

本地構建會直接生成 gzip 文件

 

nginx 端需要開啟靜態Gzip，參見：https://www.cnblogs.com/savokiss/p/8419343.html