文章轉載自：https://mp.weixin.qq.com/s/NuTmEUQU5L69is53bCauKA

Nginx 中配置前端的 gzip 壓縮，有兩種思路：

• Nginx 動態壓縮，靜態檔案還是普通檔案，請求來了再壓縮，然後返回給前端。
• Nginx 靜態壓縮，提前把檔案壓縮成 .gz 格式，請求來了，直接返回即可。

Nginx 動態壓縮

動態壓縮 Vue 還是使用普通的打包編譯後的檔案，將前端編譯打包後的檔案拷貝到 Nginx 的 html 目錄下，然後訪問 nginx

確保 nginx 執行成功後，接下來對 nginx 進行配置：

gzip  on;  # 開啟 gzip
gzip_min_length 2k;# 超過 2kb 進行壓縮
gzip_disable msie6; # ie6 不適用 gzip
gzip_types text/css application/javascript text/javascript image/jpeg image/png image/gif; # 需要處理的檔案
 

配置完成後，重啟 Nginx, 啟動成功後，再去訪問前端頁面，就可以看到壓縮效果了。

Nginx 靜態壓縮

上面的動態壓縮有一個問題，就是每次請求響應的時候都要壓縮，其實都是相同的檔案，總是壓縮有點浪費資源。

我們可以提前將檔案壓縮好，就儲存在服務端，需要用的時候直接返回，就會方便很多。

這需要我們首先在前端安裝壓縮外掛：

npm install compression-webpack-plugin -D

安裝成功之後，接下來在 vue.config.js 中進行配置：

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: proxyObj
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [
                    new CompressionPlugin({
                        test: /\.js$|\.html$|\.css/,
                        threshold: 1024,
                        deleteOriginalAssets: false
                    })
                ]
            }
        }
    }
}
 

• threshold 表示超過 1kb 的檔案就進行壓縮。
• deleteOriginalAssets 表示壓縮後是否刪除原檔案。

配置完成後，再次執行打包命令 vue-cli-service build。這次打包完成後，我們可以在 js 目錄下看到 .gz 檔案，如下：

接下來將檔案上傳到 Nginx 伺服器，然後對 Nginx 重新進行編譯打包。想讓 Nginx 返回已經壓縮好的檔案，需要用到 Nginx 中的 http_gzip_static_module 模組，這個模組可以傳送以 .gz 作為副檔名的預壓縮檔案，所以我們要對 Nginx 重新進行編譯打包：

./configure --with-http_gzip_static_module
make
make install
 

然後在 Nginx 配置檔案中開啟 gzip_static，如下：

gzip_static  on;

注意，開啟了 gzip_static 後，gzip_types 就失效了，所以也沒必要配置這個屬性了。

靜態壓縮返回的 gzip 壓縮檔案都是提前準備好的，沒有 .gz 格式的檔案就會自動返回原檔案。這是一種和動態壓縮不同的響應策略。動態壓縮是根據 Nginx 中的配置，超過配置的大小就會自動進行壓縮。

配置完成後，重啟 Nginx，再去訪問，檢視瀏覽器日誌，就會發現 gzip 已經生效了。