前言

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

Gzip

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

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

開啟 Gzip

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

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

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

未使用 gzip 壓縮前，打包后有一個很大的文件，控制臺也給出了提示，使用 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：是否在控制臺輸出壓縮結(jié)果，默認(rèn)為 true
• threshold：啟用壓縮的文件大小限制，單位是字節(jié)，默認(rèn)為 0
• disable: false：是否禁用壓縮，默認(rèn)為 false
• deleteOriginFile：壓縮后是否刪除原文件，默認(rèn)為 false
• algorithm：采用的壓縮算法，默認(rèn)是 gzip
• ext：生成的壓縮包后綴

總結(jié)

到此這篇關(guān)于Vite打包性能優(yōu)化之開啟Gzip壓縮的文章就介紹到這了,更多相關(guān)Vite開啟Gzip壓縮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論