快捷導(dǎo)航

Vite打包性能優(yōu)化之開(kāi)啟Gzip壓縮實(shí)踐過(guò)程

更新時(shí)間：2022年12月02日 15:19:10 作者：昆吾kw

vue前端項(xiàng)目發(fā)布的時(shí)候,打包可實(shí)現(xiàn)gzip格式的壓縮,下面這篇文章主要給大家介紹了關(guān)于Vite打包性能優(yōu)化之開(kāi)啟Gzip壓縮的相關(guān)資料,需要的朋友可以參考下

前言

在使用 vite 進(jìn)行項(xiàng)目打包時(shí)，默認(rèn)已經(jīng)幫我們做了一些優(yōu)化工作，比如代碼的壓縮，分包等等。除此之外，我們還有一些可選的優(yōu)化策略，比如使用 CDN ，開(kāi)啟 Gzip 壓縮等。本文會(huì)介紹在 vite 中使用插件來(lái)開(kāi)啟 Gzip 壓縮。

Gzip

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

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

開(kāi)啟 Gzip

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

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

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

未使用 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 // 對(duì)大于 1mb 的文件進(jìn)行壓縮
    })
  ],
});

再次打包：

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

插件的其他配置

filter：過(guò)濾器，對(duì)哪些類(lèi)型的文件進(jìn)行壓縮，默認(rèn)為 ‘/.(js|mjs|json|css|html)$/i’
verbose: true：是否在控制臺(tái)輸出壓縮結(jié)果，默認(rèn)為 true
threshold：?jiǎn)⒂脡嚎s的文件大小限制，單位是字節(jié)，默認(rèn)為 0
disable: false：是否禁用壓縮，默認(rèn)為 false
deleteOriginFile：壓縮后是否刪除原文件，默認(rèn)為 false
algorithm：采用的壓縮算法，默認(rèn)是 gzip
ext：生成的壓縮包后綴