什么是Gzip
Gzip是一種文件級別的數(shù)據(jù)壓縮算法，用來減少文件大小录平，節(jié)省帶寬從而提高網(wǎng)站的訪問速度麻车。它可以有效減少網(wǎng)絡(luò)傳輸時間，這在大多數(shù)網(wǎng)站上可以大大提升用戶體驗斗这，例如網(wǎng)站會更快地加載动猬。Gzip是一種很好的優(yōu)化技術(shù)。
兩種使用Gzip壓縮的姿勢
一表箭、構(gòu)建時使用webpack或vite生成對應(yīng)的.gz文件赁咙，瀏覽器請求xxx.js時，返回對應(yīng)的xxx.js.gz燃逻。實操方法在文章最后序目。
二、瀏覽器訪問xxx.js時伯襟，服務(wù)器對文件進(jìn)行Gzip壓縮后傳輸給瀏覽器猿涨。
前端預(yù)生成gz文件
關(guān)于第一種方法，除了前端需要預(yù)先生成.gz的壓縮文件姆怪，還需要服務(wù)端進(jìn)行一些配置叛赚，以Nginx為例澡绩，需要在nginx.conf中增加以下配置：
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
gzip_static on;
server {
listen 8462;
server_name localhost;
location / {
root dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
gzip_static on; 開啟這個屬性就是靜態(tài)加載本地的gz文件。
服務(wù)器在線Gzip壓縮
前端無需進(jìn)行配置俺附，也不用預(yù)先生成.gz文件肥卡，服務(wù)器進(jìn)行處理即可，以Nginx為例事镣，需要在nginx.conf中增加以下配置：
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
# 開啟gzip
gzip on;
# 設(shè)置緩沖區(qū)大小
gzip_buffers 4 16k;
#壓縮級別官網(wǎng)建議是6
gzip_comp_level 6;
#壓縮的類型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;
server {
listen 8462;
server_name localhost;
location / {
root dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
更詳細(xì)的Gzip配置步鉴，可以查閱官方文檔。
兩種方案優(yōu)缺點
一璃哟、前端借助構(gòu)建工具氛琢，預(yù)先生成gz文件，缺點是構(gòu)打包后構(gòu)建的產(chǎn)物體積會變大随闪，優(yōu)點是不耗費服務(wù)器的性能阳似。
二、使用nginx在線Gzip铐伴，缺點是需要實時壓縮撮奏，會耗費服務(wù)器的性能，但是無需前端預(yù)先生成gz文件当宴。
如何使用畜吊、區(qū)分兩種方式
那么問題來了，如果想在有g(shù)z文件的時候進(jìn)行靜態(tài)壓縮即供，不存在gz文件的時候進(jìn)行在線壓縮而不是加載源文件定拟，要如何做呢？
答案就是兩種配置都打開：
gzip on;
gzip_static on;
gzip_comp_level 2;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_static的優(yōu)先級高逗嫡，會先加載靜態(tài)gz文件青自，當(dāng)同目錄下不存在此文件的時候，會執(zhí)行在線壓縮的命令驱证。所以我們兩個配置都開啟即可
那么都開啟的情況下延窜，我們怎么區(qū)分使用了靜態(tài)加載還是在線壓縮呢？
響應(yīng)頭的Content-Edcoding:gzip表示Gzip壓縮已經(jīng)生效抹锄，而Etag中只有簡單字符表示靜態(tài)資源加載逆瑞，而前面帶 W/ 表示啟動了在線壓縮。
靜態(tài)加載
在線壓縮
實踐
Vite打包生成gz文件
在Vite中使用vite-plugin-compression這個插件可以讓你的Vite應(yīng)用程序在發(fā)布前自動壓縮 JavaScript 和 CSS 文件伙单，大大減少文件大小获高，從而提高應(yīng)用程序的性能。
首先吻育，為你的項目安裝 vite-plugin-compression
npm install --save-dev vite-plugin-compression
接下來念秧，在 vite.config.js 中添加以下代碼：
import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [viteCompression()]
})
最后，只需要在命令行中運行vite build命令即可布疼，構(gòu)建產(chǎn)物中就會出現(xiàn)對應(yīng)的.gz文件摊趾。
Webpack打包生成gz文件
Webpack使用的插件叫做compression-webpack-plugin币狠。
首先，安裝插件：
npm install compression-webpack-plugin --save-dev
接下來砾层，在vue.config.js文件進(jìn)行配置：
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
plugins: [
new CompressionPlugin({
algorithm: 'gzip', // 使用gzip壓縮
test: /\.js$|\.html$|\.css$/, // 匹配文件名
filename: '[path].gz[query]', // 壓縮后的文件名(保持原文件名漩绵，后綴加.gz)
minRatio: 1, // 壓縮率小于1才會壓縮
threshold: 10240, // 對超過10k的數(shù)據(jù)壓縮
deleteOriginalAssets: false, // 是否刪除未壓縮的源文件，謹(jǐn)慎設(shè)置肛炮，如果希望提供非gzip的資源止吐，可不設(shè)置或者設(shè)置為false（比如刪除打包后的gz后還可以加載到原始資源文件）
}),
],
},
};
執(zhí)行構(gòu)建命令，即可輸出對應(yīng)的.gz文件铸董。
