欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

什么是Gzip壓縮

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

gzip壓縮算法適用于文本類型的數(shù)據(jù)，通常用于壓縮Web服務(wù)器上的靜態(tài)資源文件，例如HTML，CSS，JavaScript文件和其他文本文件。當(dāng)客戶端請(qǐng)求這些文件時(shí)，Web服務(wù)器會(huì)將它們壓縮為gzip格式并將其發(fā)送到客戶端，這可以顯著提高網(wǎng)站的加載速度和性能。

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

優(yōu)點(diǎn)

減少文件大小，gzip壓縮比率在3到10倍左右，可以大大節(jié)省服務(wù)器網(wǎng)絡(luò)帶寬。

1. 減少存儲(chǔ)空間
2. 通過(guò)網(wǎng)絡(luò)傳輸文件時(shí)，減少傳輸時(shí)間

缺點(diǎn)

1. 開(kāi)啟gzip后會(huì)額外增加很多cpu開(kāi)銷，無(wú)論是服務(wù)器壓縮還是前端解壓縮都需要消耗cpu。
2. 對(duì)圖片壓縮支持不太好，會(huì)出現(xiàn)體積變大或圖片失真問(wèn)題。

如何開(kāi)啟 Gzip

兩個(gè)先行條件

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

判斷是否已開(kāi)啟Gzip服務(wù)

1. 服務(wù)器開(kāi)啟了 Gzip 壓縮，http響應(yīng)頭出現(xiàn)：Content-Encoding: gzip
2. 客戶端支持 Gzip 壓縮，http請(qǐng)求頭出現(xiàn)：Accept-Encoding: gzip

服務(wù)器支持 gzip 壓縮的方式

1. 打包的時(shí)候生成對(duì)應(yīng)的 .gz 文件，瀏覽器請(qǐng)求xxx.js資源時(shí)，服務(wù)器返回對(duì)應(yīng)的xxx.js.gz文件。
2. 瀏覽器請(qǐng)求xx.js時(shí)，服務(wù)器對(duì)xx.js進(jìn)行壓縮后傳輸給瀏覽器

webpack 搭配 nginx 配置的作用

減少服務(wù)器壓縮文件的壓力

即：webpack 打包的時(shí)候生成資源對(duì)應(yīng)的 .gz 文件，瀏覽器請(qǐng)求xxx.js（或xxx.css）資源時(shí)，服務(wù)器直接返回對(duì)應(yīng)的xxx.js.gz（或xxx.css.gz）文件

webpack 配置

構(gòu)建過(guò)程中為每個(gè)資源文件生成一個(gè) .gz 后綴的壓縮文件，然后可以配置 web 服務(wù)器（nginx），使其優(yōu)先提供這些 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, // //壓縮超過(guò)此大小的文件,以字節(jié)為單位
      minRatio: 0.8,
      deleteOriginalAssets: false, //刪除原始文件只保留壓縮后的文件
    }),
  ],
}

打包

pnpm build:test

打包產(chǎn)物大小對(duì)比

打包后資源大小超過(guò) 10 KB 的會(huì)生成對(duì)應(yīng)的 .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 在提供文件時(shí)優(yōu)先查找對(duì)應(yīng)的 .gz 版本，如果找到，nginx 會(huì)提供 .gz 文件而不是原始文件，并且還會(huì)自動(dòng)設(shè)置正確的 Content-Encoding 響應(yīng)頭。

當(dāng)瀏覽器支持 gzip 壓縮且請(qǐng)求特定資源時(shí)，如果對(duì)應(yīng)的 .gz 文件存在，nginx 就會(huì)直接提供該壓縮文件，從而減少數(shù)據(jù)傳輸量，加快網(wǎng)頁(yè)加載速度。

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

Lighthouse 性能優(yōu)化分析