一、前言

不管是vue項目還是react項目在使用webpack打包之后都會生成一個動輒一兩兆甚至更大的js文件，在某些情況下嚴(yán)重影響項目性能，打開頁面的時候白屏?xí)r間會很長，本文將介紹如何使用gzip壓縮打包，主要是nginx部署的配置，非常重要，我查閱了很多文章基本都沒用說清楚甚至錯誤的。

gzip壓縮分兩種，一種是服務(wù)器壓縮后傳輸給瀏覽器，但是這種方案是請求時服務(wù)器實時壓縮，比較消耗服務(wù)器性能；另外一種就是前端在webpack打包的時候壓縮好，服務(wù)器做一些相應(yīng)配置就可以返回壓縮包給瀏覽器，只是打包出來的dist體積會偏大，但是不消耗服務(wù)器性能。

這兩種綜合起來使用是比較劃算的，接下來說說前端打包步驟。

二、nginx配置

這個配置花了我很多時間，網(wǎng)上寫的基本都不全甚至是錯誤的，按照我下面的步驟保證可以實現(xiàn)效果。

1. 檢查nginx模塊

首先要檢查一下nginx的模塊，找到nginx的q啟動文件，我的是/usr/sbin/nginx，如果你找不到可以使用 ps -ef | grep nginx 命令找到master進程所在的目錄，進入sbin目錄然后執(zhí)行 ./nginx –V ，注意是大寫的V，查看結(jié)果如下：

第一行是nginx的版本，我的是1.16.1，重點是最后一行，我的nginx安裝了很多模塊，其中我們需要的就是紅框部分 --with-http_gzip_static_module，有的話那就不需要下面的步驟了，可以直接跳到第2步，如果沒有那就繼續(xù)往下看。

2、加入模塊重新編譯

如果我們在上面步驟里發(fā)現(xiàn)nginx沒有gzip_static模塊的話，那就需要我們重新編譯安裝一下nginx。

首先需要找到nginx的源碼路徑，如果不知道可以執(zhí)行find / -name nginx查找，我的在/usr/local/nginx-1.16.1，然后cd到這個目錄，可以先使用ll命令看一下有沒有configure文件，如果有說明源碼目錄找對了，如果沒有則再查找一下，實在找不到那就說明源碼已經(jīng)被刪了，那就只能卸載當(dāng)前nginx整個重裝了。

如果第一步看到的nginx已有一些模塊，則需要把這些已有的模塊復(fù)制下來，然后再后面加上--with-http_gzip_static_module，執(zhí)行如下命令：

./configure --prefix=/usr/share/nginx --modules-path=...[整個復(fù)制]... --with-http_gzip_static_module

如果第一步看到的一個模塊都沒有的話，那就直接重新編譯，注意 --prefix=后面寫ng所在路徑：

./configure --prefix=/usr/share/nginx --with-http_gzip_static_module

3、安裝

執(zhí)行命令make，進行安裝

make

4、備份

為了確保安全，將舊的nginx做一個備份(目錄如果不一樣記得更換)

cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak

5、覆蓋原來的nginx

先把nginx服務(wù)停止掉

ps -ef | grep nginx

找到master進程并且將其kill掉。復(fù)制安裝好的新的nginx文件覆蓋舊的：

cp ./objs/nginx /usr/local/nginx/sbin/

6、驗證

查看模塊

/usr/local/nginx/sbin/nginx -V

如果出現(xiàn) gzip_module說明安裝成功。

7、添加gzip配置

一般是在http里面加，也可以在某個server里加

http {
	gzip on;
	gzip_static on;
	gzip_min_length  5k;
	gzip_buffers     4 16k;
	gzip_http_version 1.0;
	gzip_comp_level 7;
	gzip_types       text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
	gzip_vary on;
}

其中：gzip_static on; 是為了命中dist里的gz文件，其他的配置是服務(wù)器實時壓縮配置，一般兩種都寫上，有靜態(tài)gz文件的會優(yōu)先返回gz文件，沒有的話就會開啟實時壓縮，實時壓縮是比較耗服務(wù)器資源的。

三、附錄

配置項釋義：

# 開啟服務(wù)器實時gzip
  gzip on;

  # 開啟靜態(tài)gz文件返回
  gzip_static on;

  # 啟用gzip壓縮的最小文件，小于設(shè)置值的文件將不會壓縮
  gzip_min_length 1k;

  # 設(shè)置壓縮所需要的緩沖區(qū)大小
  gzip_buffers 32 4k;

# 設(shè)置gzip壓縮針對的HTTP協(xié)議版本
  gzip_http_version 1.0;

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

  # 進行壓縮的文件類型。javascript有多種形式。其中的值可以在 mime.types 文件中找到。
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

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

  # 禁用IE 6 gzip
  gzip_disable "MSIE [1-6]\.";

四、webpack配置

這一步是很簡單的，安裝一個包，然后加上配置即可

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

我這里下載的是1.1.2版本的，試過更高的版本會有ES6語法的報錯，因為我node使用的是v12，如果node版本更高可以嘗試更高版本。

然后在vue.config.js里加上配置如下：

module.exports = {
  chainWebpack: config => {
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    if (process.env.NODE_ENV === 'production') {
        config.plugin('CompressionPlugin').use(
        	new CompressionWebpackPlugin({
            test: /\.(js|css)$/,
            threshold: 10240, // 超過10kb的文件就壓縮
      			deleteOriginalAssets:true, // 不刪除源文件
      			minRatio: 0.8
          })
        )
   	}
  }
}

然后當(dāng)我們運行npm run build之后你就會發(fā)現(xiàn)dist里除了以前的文件以外會有很多同名的gz文件，而且體積小了很多，這就是壓縮后的了。

文章來源地址http://www.zghlxwxcb.cn/news/detail-434384.html