文字壓縮和程式碼分割和現代圖像格式 - 效能優化

我嘗試了以下方法來優化我的業餘專案效能：

1. 文字壓縮
2. 程式碼分割
3. 現代影像格式.

---

分析器

我建立的應用程式使用了 Vite 和 pnpm。現代 Web 建置工具在建置過程中預設自動最佳化 Web 效能。所以我們可以 pnpm run build 然後 pnpm dlxserve dist。然後使用 Chrome DevTools 的 Lighthouse 作為指南來解決它列出的每個瓶頸。

啟用文字壓縮

它影響FCP和LCP。

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

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

第 1 步：安裝 vite-plugin-compress
第2步：設定vite.config.js文件，新增插件和一些參數。正如 Google 開發人員建議的那樣，應該盡可能使用 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 可以做得更好，在建置過程中進行壓縮：

使用 gzip 進行影片

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

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

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

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

---

以現代格式提供圖像

Chrome 開發者建議以 AVIF 或 WebP 格式提供影像。我選擇 WebP 因為它有更多的跨瀏覽器支援。

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

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

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

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

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

我們甚至可以寫一個簡單的 .bat 腳本，自動將目標資料夾下的所有 .png 圖片轉換為 .webp 圖片。

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

---

參考

• 刪除未使用的 JavaScript
• 使用「覆蓋範圍」標籤查看已使用和未使用的 CSS。
• 以現代格式提供影像。
• 使用命令列建立 WebP 映像
• 預編譯實用程式
• WebP 影像格式 - 我可以使用
• 最大內容油漆 (LCP)
• 首次內容繪製 (FCP)

以上是文字壓縮和程式碼分割和現代圖像格式 - 效能優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！