狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

什么是Gzip壓縮

gzip是一種文件壓縮格式，它可以將文件壓縮為較小的大小，以便更快地在網絡上傳輸或存儲在磁盤上。

gzip壓縮算法適用于文本類型的數據，通常用于壓縮Web服務器上的靜態資源文件，例如HTML，CSS，JavaScript文件和其他文本文件。當客戶端請求這些文件時，Web服務器會將它們壓縮為gzip格式并將其發送到客戶端，這可以顯著提高網站的加載速度和性能。

gzip壓縮是一種有損壓縮，這意味著壓縮后的文件可能會損失一些細節和精度，但通常不會對文件的實用性造成太大影響。

優點

減少文件大小，gzip壓縮比率在3到10倍左右，可以大大節省服務器網絡帶寬。

1. 減少存儲空間
2. 通過網絡傳輸文件時，減少傳輸時間

缺點

1. 開啟gzip后會額外增加很多cpu開銷，無論是服務器壓縮還是前端解壓縮都需要消耗cpu。
2. 對圖片壓縮支持不太好，會出現體積變大或圖片失真問題。

如何開啟 Gzip

兩個先行條件

• 服務器支持并開啟gzip壓縮服務（nginx、IIS、Apache、tomcat服務器都支持）
• 客戶端（瀏覽器）支持Gzip解壓服務，目前主流瀏覽器都支持Gzip解壓服務，除了IE（可通過Nginx配置 disabled）

判斷是否已開啟Gzip服務

1. 服務器開啟了 Gzip 壓縮，http響應頭出現：Content-Encoding: gzip
2. 客戶端支持 Gzip 壓縮，http請求頭出現：Accept-Encoding: gzip

服務器支持 gzip 壓縮的方式

1. 打包的時候生成對應的 .gz 文件，瀏覽器請求xxx.js資源時，服務器返回對應的xxx.js.gz文件。
2. 瀏覽器請求xx.js時，服務器對xx.js進行壓縮后傳輸給瀏覽器

webpack 搭配 nginx 配置的作用

減少服務器壓縮文件的壓力

即：webpack 打包的時候生成資源對應的 .gz 文件，瀏覽器請求xxx.js（或xxx.css）資源時，服務器直接返回對應的xxx.js.gz（或xxx.css.gz）文件

webpack 配置

構建過程中為每個資源文件生成一個 .gz 后綴的壓縮文件，然后可以配置 web 服務器（nginx），使其優先提供這些 gzip 壓縮文件。

• @vue/cli 5.0.8
• compression-webpack-plugin 4.0.1?

// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require('compression-webpack-plugin'); // 4.0.1


module.exports = {
  ...
  configureWebpack: {
  new BundleAnalyzerPlugin(),
  plugins: [
    new CompressionPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip', //壓縮算法
      test: /.js$|.css$|.html$/,
      threshold: 10240, // //壓縮超過此大小的文件,以字節為單位
      minRatio: 0.8,
      deleteOriginalAssets: false, //刪除原始文件只保留壓縮后的文件
    }),
  ],
}

打包

pnpm build:test

打包產物大小對比

打包后資源大小超過 10 KB 的會生成對應的 .gz 文件

bundle 分析

• 原資源大小，總 2MB
• Gzip 壓縮后的資源大小，總 713.55 KB，壓縮率 65%

713.55 KB = 0.7 MB

2MB * （1 - x）= 0.7MB

x = 65%

原資源大小

Gzip 壓縮后的大小

nginx配置

確保在 nginx 中配置：gzip_static: on; 指令。

告訴 nginx 在提供文件時優先查找對應的 .gz 版本，如果找到，nginx 會提供 .gz 文件而不是原始文件，并且還會自動設置正確的 Content-Encoding 響應頭。

當瀏覽器支持 gzip 壓縮且請求特定資源時，如果對應的 .gz 文件存在，nginx 就會直接提供該壓縮文件，從而減少數據傳輸量，加快網頁加載速度。

gzip on; # 開啟Gzip壓縮
gzip_disable "msie6"; # IE 對 Gzip 壓縮不友好，禁掉
gzip_buffers 4 16k; # 獲取多少內存用于緩存壓縮結果，4 16k表示以16k*4為單位獲得，默認 4 8k
gzip_comp_level 6; # 壓縮比{1 - 9}，1處理壓縮速度最快，9最慢（傳輸快但消耗CPU）
gzip_static: on; # 告訴 nginx 在提供文件時優先查找對應的 .gz 版本
gzip_http_version 1.1; # 識別http協議的版本,早期瀏覽器可能不支持gzip自解壓,用戶會看到亂碼，默認1.1
gzip_min_length 10k; // 超過 10Kb才壓縮
gzip_types text/plain text/plain application/javascript application/x-javascript text/css application/xml text/javascript

Lighthouse 性能優化分析