前端性能優(yōu)化 - 啟用 Gzip 壓縮
共 8689字，需瀏覽 18分鐘
·
2024-12-02 08:45
前端性能優(yōu)化是提升網(wǎng)站加載速度和用戶體驗(yàn)的重要手段。啟用Gzip壓縮是其中一種常見的優(yōu)化技術(shù)。Gzip是一種廣泛使用的壓縮算法，它可以顯著減少傳輸?shù)娇蛻舳说臄?shù)據(jù)量。今天分享這篇文章來詳細(xì)談?wù)勅绾伍_啟Gzip壓縮來優(yōu)化前端性能。
以下是正文：
啟用 gzip 壓縮可大幅縮減所傳輸?shù)馁Y源文件響應(yīng)的大小（最多可縮減 90%），服務(wù)器將向客戶端發(fā)送較小的資源，從而顯著縮短下載相應(yīng)資源所需的時(shí)間、減少客戶端的流量消耗并加快網(wǎng)頁的首次呈現(xiàn)速度。因此，它是前端性能優(yōu)化的一個(gè)重要手段。今天就來介紹一下如何啟用 gzip 壓縮？
雖然今天的標(biāo)題里有前端兩個(gè)字，但實(shí)際的啟用 gzip 配置操作都在后端。主要介紹的如何在nginx 服務(wù)器端啟用 gzip 壓縮。
nginx 是一款性能強(qiáng)大的服務(wù)器，它提供了很多對優(yōu)化 Web 性能有幫助的功能配置。包括我們今天的主題，對靜態(tài)資源提供 gzip 壓縮的能力。
需要壓縮的資源類型
在具體介紹 nginx 服務(wù)器如何開啟 gzip 壓縮前，我們需要知道需要壓縮哪些類型的資源文件？使用 gzip 壓縮的最大錯(cuò)誤之一是壓縮每個(gè)頁面可用的每個(gè)資源對象。首先需要知道，gzip 壓縮主要對文本類型的資源壓縮效果最好，例如常用見的文本資源：
-
HTML 文件：text/html（nginx 服務(wù)器默認(rèn)就會(huì)壓縮）、application/xhtml+xml -
CSS 文件：text/css -
JS 文件：application/x-javascript、application/javascript、text/javascript -
JSON 文件（或者API請求結(jié)果）：application/json、application/geo+json、application/ld+json application/manifest+json、application/x-web-app-manifest+json -
XML 文件：application/xml、application/atom+xml、application/rdf+xml、application/rss+xml -
SVG 文件：image/svg+xml;
除了常用的文本文件，gzip 也支持壓縮以下 MIME 類型的文件：
-
application/vnd.ms-fontobject -
application/wasm -
font/eot -
font/otf -
font/ttf -
image/bmp -
text/cache-manifest -
text/calendar -
text/markdown -
text/plain -
text/vcard -
text/vnd.rim.location.xloc -
text/vtt -
text/x-component -
text/x-cross-domain-policy
需要說明的是，圖片本身就是壓縮格式的數(shù)據(jù)，要壓縮圖片需要使用針對圖片資源的專門優(yōu)化方式，本文就不多介紹了。
確定 Nginx 服務(wù)器是否支持 GZip
如果你是使用 CentOS （本文以 CentOS 為例）或者使用其它 linux 服務(wù)器，通過包管理工具（yum、apt-get、dnf等）安裝的 nginx，默認(rèn)就開啟了對 gzip 模塊的支持。
# Nginx 默認(rèn)不在 CentOS 的 yum 包安裝源倉庫中，需要添加 CentOS 7 EPEL 倉庫
sudo yum install -y epel-release
# 使用 yum 安裝 nginx
sudo yum install -y nginx
nginx 中的 gzip 處理模塊是：ngx_http_gzip_module。可以使用：nginx -V 命令，查看 nginx 服務(wù)器是否開啟了對 gzip 的支持模塊：
如果顯示如上圖所示的：–with-http_gzip_static_module，就說明你的 nginx 服務(wù)器已經(jīng)支持 gzip 了，可以開始配置 gzip 壓縮了。
源碼編譯安裝 Nginx
如果使用的 nginx 沒有開啟 ngx_http_gzip_module 模塊，那么就需要使用源碼方式重新編譯安裝 nginx，并配置開啟 ngx_http_gzip_module 模塊。
第1步：安裝編譯 nginx 的依賴包
源碼編譯安裝 nginx 需要先安裝按章編譯相關(guān)的依賴包，命令如下：
sudo yum install gcc libpcre3 libpcre3-dev openssl libssl-dev libssl0.9.8 perl libperl-dev
第2步：下載 nginx
根據(jù)你的需要下載相應(yīng)的 nginx 版本，命令如下：
wget http://nginx.org/download/nginx-1.11.2.tar.gz
第3步：進(jìn)行編譯安裝前的配置
解壓下載的文件，根據(jù)自己的情況解壓到指定目錄：
# 解壓要 /usr/src，根據(jù)實(shí)際情況調(diào)整路徑
tar -xzvf nginx-1.11.2.tar.gz -C /usr/src
然后跳轉(zhuǎn)到解壓后的目錄
cd /usr/src/nginx-1.11.2
接著配置生成 makefile，如果需要添加第三方模塊，使用 –add-module=/path/module1 的方法編譯，安裝地址是 /usr/local/nginx，這個(gè)要根據(jù)你的實(shí)際情況配置：
# 根據(jù)實(shí)際情況配置，這里只寫出了啟用 gzip 的配置
./configure --prefix=/usr/local/nginx --with-http_gzip_static_module
最后就是是編譯安裝了：
# make 是生成在objs目錄中，make install 則安裝到 prefix 所示的目錄中
make && make install
沒有錯(cuò)誤出現(xiàn)的話，就可以進(jìn)入指定的存放 nginx 配置文件的目錄(/usr/local/nginx)進(jìn)行配置了。當(dāng)然，手動(dòng)安裝完成后，還是可以使用 nginx -V 命令查看以下，確定已經(jīng)正確開始 nginx 服務(wù)器的 gzip 壓縮支持模塊。
配置 GZip 壓縮
在確定支持 gzip 后，就可以進(jìn)行 gzip 壓縮相關(guān)的配置了。使用 vim 編輯器打開 nginx.conf 配置文件：
sudo vim /usr/local/nginx/nginx.conf
打開文件后，按 i 鍵進(jìn)入編輯模式，在 http 塊中輸入以下配置信息：
# gzip 可以在 http, server, location 中和配置，這里配置到 http 下是全局配置，
# 只要是使用當(dāng)前 nginx 服務(wù)器的站點(diǎn)都會(huì)開啟 gzip
http {
gzip on;
gzip_comp_level 5;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_proxied any;
gzip_vary on;
gzip_types
application/javascript
application/x-javascript
text/javascript
text/css
text/xml
application/xhtml+xml
application/xml
application/atom+xml
application/rdf+xml
application/rss+xml
application/geo+json
application/json
application/ld+json
application/manifest+json
application/x-web-app-manifest+json
image/svg+xml
text/x-cross-domain-policy;
gzip_static on;
gzip_disable "MSIE [1-6]\.";
}
不知道這些配置都代表什么意思？現(xiàn)在來逐一解釋每項(xiàng)配置的意思：
-
gzip on;：開啟 gzip，Default: off -
gzip_comp_level 5;：壓縮級(jí)別：1-9。5 是推薦的壓縮級(jí)別，即可保證壓縮的效果（對大多 ASCII 編碼的文件可以達(dá)到75%的壓縮比），同時(shí)對 CPU 資源的損耗也比較低。 實(shí)測 6-9 的壓縮比壓縮的效果與 5 相比效果并不明顯，而且對 CPU 資源的消耗會(huì)比較大，所以推薦壓縮等級(jí)設(shè)置為5。Default: 1 -
gzip_min_length 1k;：gzip 壓縮文件體積的最小值。如果文件已經(jīng)足夠小了，就不需要壓縮了，因?yàn)榧幢銐嚎s了，效果也不明顯，而且會(huì)占用 CPU 資源。Default: 20 -
gzip_buffers 4 16k;：設(shè)置用于壓縮響應(yīng)的 number 和 size 的緩沖區(qū)。默認(rèn)情況下，緩沖區(qū)大小等于一個(gè)內(nèi)存頁。根據(jù)平臺(tái)的不同，它也可以是4K或8K。 -
gzip_proxied any;：是否開啟對代理資源的壓縮。很多時(shí)候，nginx 會(huì)作為反向代理服務(wù)器，實(shí)際的靜態(tài)資源在上有服務(wù)器上，只有開啟了 gzip_proxied 才會(huì)對代理的資源進(jìn)行壓縮。Default: off -
gzip_vary on;：每當(dāng)客戶端的 Accept-Encoding-capabilities 頭發(fā)生變化時(shí)，告訴代理緩存 gzip 和常規(guī)版本的資源。避免了不支持 gzip 的客戶端（這在今天極為罕見）在代理給它們 gzip 版本時(shí)顯示亂碼的問題。Default: off -
gzip_types：壓縮文件的 MIME 類型。 text/html默認(rèn)就會(huì)開啟 gzip 壓縮，所以不用特別顯示配置text/html的 MIME 類型。Default: text/html -
gzip_static on;：服務(wù)器開啟對靜態(tài)文件（ CSS, JS, HTML, SVG, ICS, and JSON）的壓縮。但是，要使此部分與之相關(guān)，需要在 gzip_types 設(shè)置 MIME 類型，，僅僅設(shè)置 gzip_static 為 on 是不會(huì)自動(dòng)壓縮靜態(tài)文件的。 -
gzip_disable “MSIE [1-6].”;：IE6 以下的瀏覽器禁用 gzip 壓縮。
現(xiàn)在應(yīng)該對各個(gè)配置項(xiàng)的意義有了更一步的了解了。其實(shí)在 nginx 中調(diào)用 gzip 配置方式也有更好處理方式。更加推薦的一種做法是將 gzip 的配置保存到獨(dú)立的配置文件中，例如：gzip.conf。然后在需要啟用 gzip 壓縮的地方，例如上面的代碼在 nginx.conf 文件中引用 gzip.conf 文件：
http {
# 引用 gzip 配置，本例是在 http 模塊中調(diào)用，表示所有通過此 nginx 服務(wù)器配置的站點(diǎn)
# 將全部都開啟 gzip 壓縮
include path/to/gzip.conf;
}
這種處理方式的好處是以后僅需在 gzip.conf 文件中調(diào)整配置就可以了，并且調(diào)整配置后，所有調(diào)用 gzip.conf 配置的地方就一次性全部都調(diào)整了。
好了，在完成 gzip 的配置以后，按冒號(hào)“:”鍵，輸入 wq，保存配置并退出 vim 編輯器。然后輸入重啟 nginx 命令：
# 或者 sudo service nginx restart
sudo service nginx reload
當(dāng)然，如果你不放心 gzip 相關(guān)的配置是否編寫正確，也可以使用 nginx -t 檢測 nginx.conf 配置是否正確。
如圖所示，表示 nginx.conf 配置正確無誤。
驗(yàn)證 GZip 壓縮效果
我們打開 Chrome 瀏覽器的開發(fā)者工具，然后查看 Network 面板查看我們的配置是否生效:
上圖是測試站點(diǎn) index.html 文件的服務(wù)端響應(yīng)頭信息，重點(diǎn)查看以下幾個(gè)響應(yīng)頭信息：
-
content-type: text/html; charset=utf-8：表示返回的數(shù)據(jù)的 MIME 類型是 text/html； -
content-encoding: gzip：該文件采用了 gzip 壓縮編碼； -
vary: Accept-Encoding：（配置說明中提到的）當(dāng)客戶端的 Accept-Encoding-capabilities 頭發(fā)生變化時(shí)，告訴代理緩存 gzip 和常規(guī)版本的資源。
看到有 vary: Accept-Encoding 頭信息，表明在 gzip.conf 文件配置的 gzip_proxied any; 和 gzip_vary on; 也起作用了。因?yàn)槭纠械臏y試站點(diǎn)確實(shí)使用 nginx 的反向代理配置，需要訪問上游服務(wù)器集群，其配置如下。
# 站點(diǎn)的配置
location / {
# 代理到名為 blog 的負(fù)載均衡集群
proxy_pass http://blog;
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
當(dāng)客戶端的 Accept-Encoding-capabilities 頭發(fā)生變化時(shí)，會(huì)告訴 nginx 服務(wù)器代理緩存 gzip 和常規(guī)版本的資源。現(xiàn)在對 vary: Accept-Encoding 的解釋是不是已經(jīng)很清楚了？
啟用 GZip 的壓縮效果
示例站點(diǎn)的 index.html 頁面原始大小為 81.6 KB，壓縮后的大小為 30.4KB, 壓縮后體積減小了 63%。啟用 gzip 壓縮后的效果還是很明顯。
（在服務(wù)器端 nginx 服務(wù)器中）啟用 gzip 壓縮，對于目前流行的單頁面應(yīng)用而言，起到的前端性能優(yōu)化作用的意義就更大了。因?yàn)閱雾撁鎽?yīng)用的界面完全是由 JavaScript 動(dòng)態(tài)繪制出來的，啟用 gzip 壓縮后會(huì)更快速的加載資源文件，特別是加速對 .js 文件的資源下載速度。這樣就能盡快地執(zhí)行 JavaScript 繪制顯示 UI 界面，從而提升用戶體驗(yàn)。
總結(jié)
雖然今天的主題聊的是前端性能優(yōu)化，不過可以看出，作為前端工程師，現(xiàn)在的要求是越來越高了。不僅僅需要掌握前端相關(guān)的技術(shù)，還需要掌握一些后端相關(guān)的技能。在做前端性能優(yōu)化時(shí)，很多時(shí)候還需要了解一些 nginx 服務(wù)器配置相關(guān)的知識(shí)，才能更加系統(tǒng)的優(yōu)化前端性能的。
例如前端性能優(yōu)化的另外一個(gè)重要手段；啟用瀏覽器緩存，就要求需要了解如何在服務(wù)端配置啟動(dòng)用緩存。還有為了提高服務(wù)器的 HTTP 響應(yīng)速度，需要在服務(wù)端開啟 HTTP/2。這都要求前端工程師掌握一定的后端的服務(wù)器配置能力。
原文地址：https://juejin.cn/post/7388347353407143973
作者：自由的巨浪