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

1. Nginx 動態壓縮，靜態文件還是普通文件，請求來了再壓縮，然后返回給前端。
2. Nginx 靜態壓縮，提前把文件壓縮成 .gz 格式，請求來了，直接返回即可。

2.2.1 Nginx 動態壓縮

動態壓縮 Vue 還是使用普通的打包編譯后的文件，將前端編譯打包后的文件拷貝到 Nginx 的 html 目錄下，然后訪問 nginx：http://192.168.91.129

確保 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 -s reload

啟動成功后，再去訪問前端頁面，就可以看到壓縮效果了。

2.2.2 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 就失效了，所以也沒必要配置這個屬性了。

配置完成后，重啟 Nginx，再去訪問，查看瀏覽器日志，就會發現 gzip 已經生效了。

「注意」

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