前言

開啟Nginx Gzip 優(yōu)化網頁加載速度
不限于Vue項目，所有前端皆可開啟gzip優(yōu)化
如果是Vue項目可以直接打包出來gz文件，這樣可以省去nginx動態(tài)壓縮占用的cpu

• Nginx 1.16.x
  • --with-http_gzip_static_module 模塊 [可選]
• Vue 3.x / Vue2.x

Nginx 增加Gzip配置

# 開啟Gzip
gzip_static on;
gzip on;
# 啟用gzip壓縮的最小文件涂邀，小于設置值的文件將不會壓縮
gzip_min_length 10k;
# 設置壓縮所需要的緩沖區(qū)大小
gzip_buffers 16 64k;
# 設置gzip壓縮針對的HTTP協(xié)議版本
gzip_http_version 1.1;
# gzip 壓縮級別，1-9眯分，數字越大壓縮的越好误甚，也越占用CPU時間
gzip_comp_level 5;
gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/png;
# 是否在http header中添加Vary: Accept-Encoding缚甩，建議開啟       
gzip_vary on;

開啟Vue Gzip打包

安裝 compression-webpack-plugin

npm compression-webpack-plugin --save-dev

config/index.js

build: {
  productionGzip: true,
  productionGzipExtensions: ['js', 'css'],
}

webpack.prod.conf.js

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 1024, // 10K以上進行壓縮
     deleteOriginalAssets: false, // 是否刪除原文件
      minRatio: 0.8 //壓縮率達到20%才會壓縮
    })

如果是 vuecli3

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
...
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要壓縮的文件類型
            threshold: 10240, // 10K以上進行壓縮
            deleteOriginalAssets: false, // 是否刪除原文件
            minRatio: 0.8 //壓縮率達到20%才會壓縮
          })
        ]
      }
    }
  }
}

原文地址&更多文章：http://www.idmiss.com/646