vue.config.js開啟對Gzip的支持。

首先先下載依賴

npm install terser-webpack-plugin@4.2.3 compression-webpack-plugin@6.1.1

 推薦webpack

npm install webpack@4.46.0

 

 vue.config.js 配置信息參考如下：

 

const CompressionPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = /\.(js|css|json|txt|ico|svg)(\?.*)?$/i
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack: config => {
    config.optimization = {
      minimize: process.env.NODE_ENV === 'production',
      minimizer: [
        new TerserPlugin({
          test: /\.js(\?.*)?$/i, // 匹配參與壓縮的文件
          parallel: true, // 使用多進程並發運行
          terserOptions: {
            // Terser 壓縮配置
            output: { comments: false }
          },
          extractComments: false // 將注釋剝離到單獨的文件中
        })
      ]
    }
  },
  chainWebpack(config) {
    if (process.env.NODE_ENV === 'production') {
      // 壓縮
      config.plugin('compressionPlugin').use(
        new CompressionPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
          // deleteOriginalAssets: true
        })
      )
    }
  }
}