原文https://www.cnblogs.com/zigood/p/12504401.html

摘要：

　　打包的時候開啟gzip可以很大程度減少包的大小，非常適合於上線部署。更小的體積對於使用者體驗來說

就意味著更快的載入速度以及更好的使用者體驗。

Vue-cli3.0專案

安裝依賴：compression-webpack-plugin

　　npm install compression-webpack-plugin --save-dev

vue.config.js修改：

const CompressionPlugin = require('compression-webpack-plugin
 
');
　const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
    publicPath: './',
    productionSourceMap: false,
    configureWebpack: {...},
    chainWebpack: config => {
        config.resolve.alias.set('@', resolve('src'));
        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
            }));
        }
    },
};

CompressionWebpackPlugin外掛引數配置：官網檢視（https://www.webpackjs.com/plugins/compression-webpack-plugin/）

注：deleteOriginalAssets: true //是否刪除原資源

伺服器啟用gzip：

　nginx配置：

gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 32k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6].";

gzip使用環境:http,server,location,if(x),一般把它定義在nginx.conf的http{…..}之間

　　gzip on

　　on為啟用，off為關閉

　　gzip_min_length 1k

　　設定允許壓縮的頁面最小位元組數，頁面位元組數從header頭中的Content-Length中進行獲取。預設值是0，不管頁面多大都壓縮。建議設定成大於1k的位元組數，小於1k可能會越壓越大。

　　gzip_buffers 4 16k

　　獲取多少記憶體用於快取壓縮結果，‘4 16k’表示以16k*4為單位獲得

　　gzip_comp_level 5

　　gzip壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值;

　　gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php

　　對特定的MIME型別生效,其中'text/html’被系統強制啟用

　　gzip_http_version 1.1

　　識別http協議的版本,早起瀏覽器可能不支援gzip自解壓,使用者會看到亂碼

　　gzip_vary on

　　啟用應答頭"Vary: Accept-Encoding"

　　gzip_proxied off

　　nginx做為反向代理時啟用,off(關閉所有代理結果的資料的壓縮),expired(啟用壓縮,如果header頭中包括"Expires"頭資訊),no-cache(啟用壓縮,header頭中包含"Cache-Control:no-cache"),no-store(啟用壓縮,header頭中包含"Cache-Control:no-store"),private(啟用壓縮,header頭中包含"Cache-Control:private"),no_last_modefied(啟用壓縮,header頭中不包含"Last-Modified"),no_etag(啟用壓縮,如果header頭中不包含"Etag"頭資訊),auth(啟用壓縮,如果header頭中包含"Authorization"頭資訊)

　　gzip_disable msie6

　　IE5.5和IE6 SP1使用msie6引數來禁止gzip壓縮 )指定哪些不需要gzip壓縮的瀏覽器(將和User-Agents進行匹配),依賴於PCRE庫

　　伺服器配置引自juan26=>https://segmentfault.com/a/1190000012571492?utm_source=tag-newest

　　注：（gzip_static on）Nginx的動態壓縮是對每個請求先壓縮再輸出，這樣造成虛擬機器浪費了很多cpu，解決這個問題可以利用nginx模組Gzip Precompression，這個模組的作用是對於需要壓縮的檔案，直接讀取已經壓縮好的檔案(檔名為加.gz)，而不是動態壓縮，對於不支援gzip的請求則讀取原檔案。

　　1.檔案可以使用 gzip 命令來進行壓縮，或任何其他相容的命令。

　　2.gzip_static配置優先順序高於gzip。

　　3.開啟nginx_static後，對於任何檔案都會先查詢是否有對應的gz檔案。

　　4.gzip_types設定對gzip_static無效。

　　5.gzip static預設適用HTTP 1.1。

檢視壓縮前後的大小對比：

壓縮前：

壓縮後：