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

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

---

分析器

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

啟用文本壓縮

它影響FCP和LCP。

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

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

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

例如

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

第 3 步：運行 pnpm run build 來壓縮

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

日志：

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

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

使用 gzip 進行視頻

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

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 中的“覆蓋率”選項卡查看未使用字節(jié)超過 20kbs 的腳本。

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

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

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

---

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

Chrome 開發(fā)者建議以 AVIF 或 WebP 格式提供圖像。我選擇 WebP 因為它有更多的跨瀏覽器支持。

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

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

您可以在 WebP 上安裝 cwebp 庫，并使用命令 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é)果相當令人印象深刻。其中一個文件的大小從 3.5 MB 減小到 178kb。即使是低信息強度的也能提供 4 倍壓縮。

我們甚至可以編寫一個簡單的 .bat 腳本，自動將目標文件夾下的所有 .png 圖片轉(zhuǎn)換為 .webp 圖片。

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

---

參考

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

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