我嘗試了以下方法來(lái)優(yōu)化我的業(yè)余項(xiàng)目性能：

1. 文本壓縮
2. 代碼分割
3. 現(xiàn)代圖像格式.

分析器

我構(gòu)建的應(yīng)用程序使用了 Vite 和 pnpm?，F(xiàn)代 Web 構(gòu)建工具在構(gòu)建過(guò)程中默認(rèn)自動(dòng)優(yōu)化 Web 性能。所以我們可以 pnpm run build 然后 pnpm dlxserve dist。然后使用 Chrome DevTools 的 Lighthouse 作為指南來(lái)解決它列出的每個(gè)瓶頸。

啟用文本壓縮

它影響FCP和LCP。

Lighthouse 建議的第一件事是使用 br 或 gzip 等算法壓縮文本。

常見(jiàn)的做法是在發(fā)出網(wǎng)絡(luò)請(qǐng)求時(shí)添加 Accept-Encoding: gzip。由于我正在構(gòu)建的應(yīng)用程序在本地提供資源，因此我安裝了 vite-plugin-compress 來(lái)壓縮文件。

第 1 步：安裝 vite-plugin-compress
第2步：配置vite.config.js文件，添加插件和一些參數(shù)。正如 Google 開(kāi)發(fā)人員建議的那樣，應(yīng)該盡可能使用 br(brotliCompress) 而不是 gzip。

例如

viteCompression({
      verbose: true,
      disable: false,
      algorithm: 'brotliCompress',
      ext: '.br',
    }),

第 3 步：運(yùn)行 pnpm run build 來(lái)壓縮

它成功壓縮了.js和.css文件。

日志：

? [vite-plugin-compression]:algorithm=brotliCompress - 壓縮文件成功。

Vite 默認(rèn)會(huì)使用 .gzip 壓縮文件，但是 brotliCompress 可以做得更好，在構(gòu)建過(guò)程中進(jìn)行壓縮：

使用 gzip 進(jìn)行視頻

vite v5.4.10 構(gòu)建用于生產(chǎn)...
? 改造了 654 個(gè)模塊。

index-B9QUW17e.css 8.60 kB │ gzip: 2.33 kB
PauseMenu-DjZ95K-6.js 1.77 kB │ gzip: 0.62 kB
索引-ohAKp9W9.js 1,688.05 kB │ gzip: 454.20 kB

Vite-plugin-compression with br

? [vite-plugin-compression]:algorithm=brotliCompress - 壓縮文件成功：
PauseMenu-DjZ95K-6.js.br 1.73kb / brotli壓縮：0.51kb
索引-B9QUW17e.css.br 8.40kb / brotli壓縮：1.97kb
索引-ohAKp9W9.js.br 1648.49kb / brotli壓縮：345.30kb

減少未使用的 JavaScript

它影響FCP和LCP。

使用 Google DevTools 中的“覆蓋率”選項(xiàng)卡查看未使用字節(jié)超過(guò) 20kbs 的腳本。

由于我在 React 中使用 Vite，代碼拆分 是減少未使用的 JavaScript 的第一件事。

在 React 中， 和 lazy() 可以幫助解決這個(gè)問(wèn)題。

1. 使用 包裹整個(gè) App 并提供后備 UI，如
   Loading
   ，這會(huì)在應(yīng)用加載時(shí)提供后備 UI。
2. 使用lazy()包裝初始頁(yè)面未使用的組件。例如，對(duì)于游戲，當(dāng)用戶按下 Esc 鍵時(shí)，會(huì)彈出一個(gè)可以打包的菜單。

以現(xiàn)代格式提供圖像

Chrome 開(kāi)發(fā)者建議以 AVIF 或 WebP 格式提供圖像。我選擇 WebP 因?yàn)樗懈嗟目鐬g覽器支持。

最新版本的 Chrome、Firefox、Safari、Edge 和 Opera 支持 WebP，而 AVIF 支持較為有限。

您可以在我可以使用查看WebP圖像格式支持信息。

您可以在 WebP 上安裝 cwebp 庫(kù)，并使用命令 cwebp -q 50 images/flower1.jpg -o images/flower1.webp 將 .png 轉(zhuǎn)換為 .webp 。

此命令以 50 的質(zhì)量（0 是最差；100 是最好）轉(zhuǎn)換 images/flower1.jpg 文件并將其另存為 images/flower1.webp。

壓縮結(jié)果相當(dāng)令人印象深刻。其中一個(gè)文件的大小從 3.5 MB 減小到 178kb。即使是低信息強(qiáng)度的也能提供 4 倍壓縮。

我們甚至可以編寫(xiě)一個(gè)簡(jiǎn)單的 .bat 腳本，自動(dòng)將目標(biāo)文件夾下的所有 .png 圖片轉(zhuǎn)換為 .webp 圖片。

viteCompression({
      verbose: true,
      disable: false,
      algorithm: 'brotliCompress',
      ext: '.br',
    }),

參考

• 刪除未使用的 JavaScript
• 使用“覆蓋范圍”選項(xiàng)卡查看已使用和未使用的 CSS。
• 以現(xiàn)代格式提供圖像。
• 使用命令行創(chuàng)建 WebP 圖像
• 預(yù)編譯實(shí)用程序
• WebP 圖像格式 - 我可以使用
• 最大內(nèi)容油漆 (LCP)
• 首次內(nèi)容繪制 (FCP)

以上是文本壓縮和代碼分割和現(xiàn)代圖像格式 - 性能優(yōu)化的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！