Vue開啟Gzip Nginx開啟Gzip

原文地址：https://www.jianshu.com/p/e78c2210c410

 

安裝compression-webpack-plugin

npm compression-webpack-plugin --save-dev

vue.config.js配置Gzip壓縮

// 導入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定義壓縮文件類型
const productionGzipExtensions = ['js', 'css']

module.exports = {
  // 配置反向代理
  devServer: {
    proxy: {
      '/api': {
        target: 'http://172.31.120.61:8080/',
        // target: 'http://172.31.120.158:8080/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
}

配置Nginx

gzip on; #開啟或關閉gzip on off
 gzip_disable "msie6"; #不使用gzip IE6
 gzip_min_length 100k; #gzip壓縮最小文件大小，超出進行壓縮（自行調節）
 gzip_buffers 4 16k; #buffer 不用修改
 gzip_comp_level 8; #壓縮級別:1-10，數字越大壓縮的越好，時間也越長
 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  壓縮文件類型