webpack gzip加速頁面訪問速度

簡單說一下對gzip的理解：

• 客戶端訪問資源時，服務端先對資源進行壓縮，再返回
• 客戶端自動解壓，無需另行處理

第一點要注意的是，客戶端每次訪問資源時，服務端都會對資源進行壓縮，每次壓縮都會占用一定的系統資源（CPU、內存），因此，這里需要對壓縮后的資源進行緩存處理。

因為前端使用了webpack打包工具，在構建過程中，使用compression-webpack-plugin插件即可對文件進行壓縮，服務端直接使用壓縮后的文件。

 

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

 

在webpack添加如下配置：

 

const CompressionWebpackPlugin = require('compression-webpack-plugin')
//...
plugins:[
  new CompressionWebpackPlugin({ //這里對大於10k的js和css文件進行壓縮，其它配置參考官方文檔
      test: /\.(js|css)$/,
      threshold: 10240
  })
]
//...

 

修改配置文件后，構建一下npm run build
即可看到部分體積較大的js和css文件，會產生.gz格式的壓縮文件。

隨后還需要對部署前端代碼的服務器進行配置，這里以nginx為例，打開nginx.conf文件，添加如下配置
需要注意的是，這里需要有兩種不同的情況：

1. 直接使用壓縮后的文件

 

# 第一種情況

http {
    # ...其它配置
    # 開啟gzip
    gzip on;
    gzip_static on;
    # ...其它配置
}

 

1. 不使用webpack打包后的.gz文件，客戶端訪問資源時再壓縮

 

# 第二種情況

http {
    # ...其它配置
    gzip  on;
    gzip_static on;
    gzip_min_length 10k;
    gzip_buffers 4 16k;
    #gzip_http_version 1.0;
    gzip_comp_level 8;
    # 根據需要添加文件類型
    gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;
    gzip_disable "MSIE [1-6]\.";
    # ...其它配置
}

 

啟動服務器，按下F12打開開發者工具，打開network，在列表的表頭右擊鼠標，修改：responses Headers 下的Content-Encoding，訪問頁面即可看到列表中部分js和css文件Content-Encoding那一列下的值為gzip，在http response header中也可看到Accept-Encoding: gzip。

需要注意的是，若使用了代理服務器，在代理服務器中也要添加相關的gzip配置。但是，如果代理服務器使用了gzip，部署前端代碼的nginx就不要使用gzip了，因為這樣會導致二次壓縮

轉載http://www.luyixian.cn/news_show_272928.aspx