別眨眼網

大家好，我是前端西瓜哥。今天帶大家學習如何啟用 gzip 來做前端效能最佳化。

HTTP 上的 gzip

gzip 是一種優秀的壓縮演算法，我們可以在 HTTP 請求上對一些文字檔案，設定 gzip 壓縮。

服務端將響應頭設定上

Content-Encoding： gzip

，表示當前資源會使用 gzip 壓縮，提示客戶端解壓使用。

當然前提是客戶端支援該壓縮演算法，服務端會透過客戶端傳送的請求頭中的

Accept-Encoding

欄位來確定是否支援。

只對文字檔案進行壓縮，是因為文字類壓縮效果好，而圖片影片這些檔案則本身就是進行壓縮過的，壓縮起來不僅效果差，還因為體積大耗費時間。

我用我自己的網站

https：//frontend。fstars。wang

做了測試。

開啟 gzip 前 index。html 大小為 8。4 KB：

開了 gzip 後減小為 2。7 KB：

你還可以對比圖片上其他資源 gzip 壓縮前後的大小變化，提升還是相當可觀的。我能夠感覺到載入確實快了一些的。

Nginx 上開啟 gzip

Nginx 預設是不開啟 gzip 的，你需要這樣設定：

http { # 開啟 gzip 壓縮 gzip on； # 使用 gzip 壓縮的檔案型別 # 此外，text/html 是自帶的，不用寫上 gzip_types text/plain text/css application/javascript application/json text/xml application/xml application/xml+rss； # 小於 256 位元組的不壓縮 # 這是因為壓縮是需要時間的，太小的話壓縮收益不大 gzip_min_length 256； # 開啟靜態壓縮 # 壓縮的資源會被快取下來，下次請求時就直接使用快取 gzip_static on；}

結尾

絕大多數的網站都對文字檔案做了 gzip 壓縮傳輸處理，降低了頻寬壓力，也讓使用者能夠更快地載入資源，屬於是一個非常基礎的前端效能優化了。

如果你也部署了自己的個人網站，快去看看你是否正確地開啟了 gzip。

我是前端西瓜哥，歡迎關注我，學習更多前端知識。