如何開啟nginx gzip壓縮

nginx 壓縮功能，可以減少文件的網絡傳輸時間、同時也節省了所需要的帶寬。比如高壓縮比的html、js、json、css等，有時可以高達70%~90%，優化效果明顯。

• gzip壓縮需要 前端 服務器同時配置 這里使用vue為例

    // 首先安裝插件 npm install --save-dev compression-webpack-plugin
    // vue.config.js中配置
    const CompressionWebpackPlugin = require('compression-webpack-plugin');
    const productionGzipExtensions = ['js', 'css', 'html'];
    module.export = {
      configureWebpack: {
        plugins: [
          new CompressionWebpackPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp(
              '\\.(' + productionGzipExtensions.join('|') + ')$'
            ),
            threshold: 10240, // 只有大小大於該值才會被處理
            minRatio: 0.8, // 壓縮率小於這個值的資源才會被處理
            deleteOriginalAssets: false, // 刪除原文件
          })
        ]
      },
    }
  

• 環境檢查

  • 首先，檢查 nginx 的編譯參數:
    nginx -V
...
--with-http_gunzip_module --with-http_gzip_static_module
...
    上面的 with-http_gunzip_module、with-http_gzip_static_module 表示系統所安裝的 nginx 版本支持通過 gzip 來壓縮文件。

    壓縮功能非常普通，nginx 也比較早支持 gzip 壓縮，所以一般安裝的版本都包含了，如果你訪問網頁得到的響應不支持，那么應該檢查服務器的版本與編譯參數。

• 開啟壓縮
  默認情況下，nginx 只對 text/html 類型的文件請求 開啟壓縮。

• nginx 配置
  配置文件位置：/etc/nginx/nginx.conf

http {
    ##
    # Gzip Settings
    ##
    # 開啟gzip
    # gzip on;

    # 是否在http header中添加Vary: Accept-Encoding，建議開啟
    # gzip_vary on;

    # 啟用gzip壓縮的最小文件，小於設置值的文件將不會壓縮
    # gzip_min_length 1k;

    # gzip_proxied any;

    # gzip 壓縮級別，1-9，數字越大壓縮的越好，也越占用CPU時間
    # gzip_comp_level 6;

    # 設置壓縮所需要的緩沖區大小
    # gzip_buffers 16 8k;

    # 設置gzip的版本
    # gzip_http_version 1.1;

    # 進行壓縮的文件類型。javascript有多種形式，后面的圖片壓縮不需要的可以自行刪除
    # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

配置完后啟動檢查看下是否開啟成功

輸入命令 nginx -s reload 重啟nginx服務器
如果后端nginx開啟了gzip，可以在network中的Content-Encoding中看到gzip

如何配置使 nginx 支持 json/js/css 類型文件的壓縮呢？

直接去掉上面 gzip_types 的#號后保存，重啟或重載配置文件后全站將啟用壓縮功能。

其它級別的配置

nginx 的 壓縮 可以配置在 http、server、location 三種級別下。

上面的示例中的壓縮功能覆蓋整個 nginx 。

如果只是想針對某個站點、或者路徑，那么到相應的配置中添加 gzip_types。

下面為本站配置，配置文件位置：/etc/nginx/site-available/xxx.conf

server {
    ...
    # compress

    gzip  on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types
        # text/html is always compressed by HttpGzipModule
        text/css
        text/javascript
        text/xml
        text/plain
        text/x-component
        application/javascript
        application/json
        application/xml
        application/rss+xml
        font/truetype
        font/opentype
        application/vnd.ms-fontobject
        image/svg+xml;

    gzip_static on;
    gzip_proxied expired no-cache no-store private auth;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary on;
    ...

• 在http模塊中配置類似，同樣是設置 gzip on、gzip_types，以及其它相關參數。根據實際需求來配置，建議別寫上多余的、不清楚會產生什么作用的參數，以免產生奇怪的現象。一般 gzip on、gzip_types這兩個就夠，或者參考官方文檔中的參數說明、逐個設置。

• 除 gzip on、gzip_types外，還有幾個比較常用修改的項：

  • gzip_min_length: 最小值，即當文件大小小於該數時，不壓縮。本身很小的文件壓縮沒什么意義
  • gzip_comp_level: 壓縮級別，1_{9，數字越高，壓縮比越大，文件越小，同時開銷也越大。如果2}4已經壓縮比很多，就沒必要設置到9。自己可以在電腦上拿個7z測試一下。而且還有更好壓縮效果的算法。

需要注意的問題

• 優化是對資源分配的平衡，壓縮需要cpu來參與計算，所以開啟壓縮是需要與cpu開銷問題一起來綜合考慮。不能一味追求高壓縮比。比如當文件很大時，壓縮文件會帶來明顯延遲，系統CPU也會產生瞬間沖上去。

• html、js、json、css等，開啟壓縮，會給網站帶來明顯的優化效果。 而針對大文件的情況，要么事先手工壓縮好，要通過其它方式提供服務，不建議在nginx中開啟對大文件的壓縮。

其它壓縮算法

當然，除了 gzip 壓縮之外，還可以支持 Brotli 壓縮算法（這個算法是google工程師開源的）。 Brotli 壓縮算法不隨官方版本分發，需要自行編譯才能使用。