什么是Gzip
Gzip是一種文件級別的數據壓縮算法，用來減少文件大小，節(jié)省帶寬從而提高網站的訪問速度。它可以有效減少網絡傳輸時間，這在大多數網站上可以大大提升用戶體驗，例如網站會更快地加載。Gzip是一種很好的優(yōu)化技術。
兩種使用Gzip壓縮的姿勢
一、構建時使用webpack或vite生成對應的.gz文件，瀏覽器請求xxx.js時，返回對應的xxx.js.gz。實操方法在文章最后。
二、瀏覽器訪問xxx.js時，服務器對文件進行Gzip壓縮后傳輸給瀏覽器。
前端預生成gz文件
關于第一種方法，除了前端需要預先生成.gz的壓縮文件，還需要服務端進行一些配置，以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文件。
服務器在線Gzip壓縮
前端無需進行配置，也不用預先生成.gz文件，服務器進行處理即可，以Nginx為例，需要在nginx.conf中增加以下配置：
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
# 開啟gzip
gzip on;
# 設置緩沖區(qū)大小
gzip_buffers 4 16k;
#壓縮級別官網建議是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;
}
}
}
更詳細的Gzip配置，可以查閱官方文檔。
兩種方案優(yōu)缺點
一、前端借助構建工具，預先生成gz文件，缺點是構打包后構建的產物體積會變大，優(yōu)點是不耗費服務器的性能。
二、使用nginx在線Gzip，缺點是需要實時壓縮，會耗費服務器的性能，但是無需前端預先生成gz文件。
如何使用、區(qū)分兩種方式
那么問題來了，如果想在有gz文件的時候進行靜態(tài)壓縮，不存在gz文件的時候進行在線壓縮而不是加載源文件，要如何做呢？
答案就是兩種配置都打開：
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文件，當同目錄下不存在此文件的時候，會執(zhí)行在線壓縮的命令。所以我們兩個配置都開啟即可
那么都開啟的情況下，我們怎么區(qū)分使用了靜態(tài)加載還是在線壓縮呢？
響應頭的Content-Edcoding:gzip表示Gzip壓縮已經生效，而Etag中只有簡單字符表示靜態(tài)資源加載，而前面帶 W/ 表示啟動了在線壓縮。
靜態(tài)加載
在線壓縮
實踐
Vite打包生成gz文件
在Vite中使用vite-plugin-compression這個插件可以讓你的Vite應用程序在發(fā)布前自動壓縮 JavaScript 和 CSS 文件，大大減少文件大小，從而提高應用程序的性能。
首先，為你的項目安裝 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命令即可，構建產物中就會出現對應的.gz文件。
Webpack打包生成gz文件
Webpack使用的插件叫做compression-webpack-plugin。
首先，安裝插件：
npm install compression-webpack-plugin --save-dev
接下來，在vue.config.js文件進行配置：
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的數據壓縮
deleteOriginalAssets: false, // 是否刪除未壓縮的源文件，謹慎設置，如果希望提供非gzip的資源，可不設置或者設置為false（比如刪除打包后的gz后還可以加載到原始資源文件）
}),
],
},
};
執(zhí)行構建命令，即可輸出對應的.gz文件。
