我嘗試了以下方法來優(yōu)化我的業(yè)餘專案效能：

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

分析器

我建立的應(yīng)用程式使用了 Vite 和 pnpm?，F(xiàn)代 Web 建置工具在建置過程中預(yù)設(shè)自動(dòng)最佳化 Web 效能。所以我們可以 pnpm run build 然後 pnpm dlxserve dist。然後使用 Chrome DevTools 的 Lighthouse 作為指南來解決它列出的每個(gè)瓶頸。

啟用文字壓縮

它影響FCP和LCP。

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

常見的做法是在發(fā)出網(wǎng)路請(qǐng)求時(shí)加入 Accept-Encoding: gzip。由於我正在建立的應(yīng)用程式在本地提供資源，因此我安裝了 vite-plugin-compress 來壓縮檔案。

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

例如

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

第 3 步：執(zhí)行 pnpm run build 來壓縮

它成功壓縮了.js和.css檔。

日誌：

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

Vite 預(yù)設(shè)會(huì)使用 .gzip 壓縮文件，但是 brotliCompress 可以做得更好，在建置過程中進(jìn)行壓縮：

使用 gzip 進(jìn)行影片

vite v5.4.10 建置用於生產(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 中的「覆蓋率」標(biāo)籤查看未使用位元組超過 20kbs 的腳本。

由於我在 React 中使用 Vite，程式碼分割 是減少未使用的 JavaScript 的第一件事。

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

1. 使用 包裹整個(gè) App 並提供後備 UI，如
   Loading
   ，這會(huì)在應(yīng)用程式載入時(shí)提供後備 UI。
2. 使用lazy()包裝初始頁面未使用的組件。例如，對(duì)於遊戲，當(dāng)使用者按下 Esc 鍵時(shí)，會(huì)彈出一個(gè)可以打包的選單。

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

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

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

您可以在我可以使用查看WebP圖像格式支援資訊。

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

此指令以 50 的品質(zhì)（0 是最差；100 是最好）轉(zhuǎn)換 images/flower1.jpg 檔案並將其另存為 images/flower1.webp。

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

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

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

參考

• 刪除未使用的 JavaScript
• 使用「覆蓋範(fàn)圍」標(biāo)籤查看已使用和未使用的 CSS。
• 以現(xiàn)代格式提供影像。
• 使用命令列建立 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)文章！