Vite怎么開啟Gzip壓縮

這篇文章主要介紹“Vite怎么開啟Gzip壓縮”，在日常操作中，相信很多人在Vite怎么開啟Gzip壓縮問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vite怎么開啟Gzip壓縮”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

Gzip

Gzip 是一種壓縮算法，在網(wǎng)絡(luò)傳輸中使用非常普遍。隨便打開一個(gè)網(wǎng)頁，都使用了 gzip 壓縮：

需要注意的是，Gzip 壓縮僅對于文本類型的資源有明顯提示，壓縮后的體積大約是壓縮前的 1/3。對于圖片，音視頻等媒體資源，本身就采用了有損壓縮，所以再使用 gzip 并不能得到很大提升，有時(shí)候反而會(huì)適得其反。

開啟 Gzip

前端項(xiàng)目打包出的 js，css資源，非常適合使用 gzip 進(jìn)行壓縮。

這樣，用戶瀏覽器收到服務(wù)器返回的 gzip 類型資源時(shí)，會(huì)自動(dòng)解壓縮。這樣，既能減少帶寬的損耗，也能加快資源傳輸?shù)臅r(shí)間。

Vite 社區(qū)插件中有一個(gè) vite-plugin-compression，可以用來做 gzip 壓縮。請看示例。

未使用 gzip 壓縮前，打包后有一個(gè)很大的文件，控制臺(tái)也給出了提示，使用 gzip 能大大減小文件體積：

安裝插件：

pnpm add -D vite-plugin-compression

配置文件：

vite.config.js

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    // ...
    viteCompression({
      threshold: 1024000 // 對大于 1mb 的文件進(jìn)行壓縮
    })
  ],
});

再次打包：

可以看到，原來 2mb 多的文件，經(jīng)過壓縮后還剩 663 kb，壓縮帶來的提升非常明顯。

插件的其他配置

• filter：過濾器，對哪些類型的文件進(jìn)行壓縮，默認(rèn)為 ‘/.(js|mjs|json|css|html)$/i’

• verbose: true：是否在控制臺(tái)輸出壓縮結(jié)果，默認(rèn)為 true

• threshold：啟用壓縮的文件大小限制，單位是字節(jié)，默認(rèn)為 0

• disable: false：是否禁用壓縮，默認(rèn)為 false

• deleteOriginFile：壓縮后是否刪除原文件，默認(rèn)為 false

• algorithm：采用的壓縮算法，默認(rèn)是 gzip

• ext：生成的壓縮包后綴

到此，關(guān)于“Vite怎么開啟Gzip壓縮”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！