文本压缩 & 代码分割 & 现代图像格式 - 性能优化

我尝试了以下方法来优化我的项目性能：

分析器

我构建的应用程序使用 Vite 和 pnpm。现代 Web 构建工具在构建过程中默认自动优化 Web 性能。因此我们可以“pnpm run build”，然后“pnpm dlx serve dist”。然后使用 Chrome DevTools 的 Lighthouse 作为指南来解决它列出的每个瓶颈。

启用文本压缩

它影响**FCP**和**LCP**。

Lighthouse 建议的第一件事是使用 **br** 或 **gzip** 等算法压缩文本。

常见的做法是**每次发出 Web 请求时都添加 Accept-Encoding: gzip**。由于我构建的应用程序在本地提供资源，因此我安装了 `vite-plugin-compress` 来压缩文件。

**步骤 1**: 安装 `vite-plugin-compress`

**步骤2**：配置`vite.config.js`文件，添加插件和一些参数。根据Google Developers的建议，尽量使用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** 可以做得更好，在构建过程中进行压缩：

**Vite 带有 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

index-ohAKp9W9.js 1,688.05 kB │ gzip: 454.20 kB

**Vite-plugin-compression 与 br**

✨ [vite-plugin-compression]:algorithm=brotliCompress - 压缩文件成功：

PauseMenu-DjZ95K-6.js.br 1.73kb / brotliCompress: 0.51kb

index-B9QUW17e.css.br 8.40kb / brotli压缩: 1.97kb

index-ohAKp9W9.js.br 1648.49kb / brotli压缩: 345.30kb

减少未使用的 JavaScript

它影响**FCP**和**LCP**。

使用 Google DevTools 中的“覆盖率”标签查看未使用字节超过 20kbs 的脚本。

由于我将 Vite 与 React 结合使用，因此**代码拆分**是减少未使用的 JavaScript 的第一步。

在 React 中，**** 和 **lazy()** 可以帮助解决这个问题。

提供现代格式的图像

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` 转换为 `.webp`。

此命令以质量“50”（“0”为最差；“100”为最好）转换“images/flower1.jpg”文件并将其保存为“images/flower1.webp”。

压缩效果非常令人印象深刻。其中一个文件的大小从 `3.5 MB` 减小到 `178kb`。即使是信息强度较低的文件也可以压缩 4 倍。

我们甚至可以编写一个简单的 `.bat` 脚本，自动将目标文件夹下的所有 `.png` 图像转换为 `.webp` 图像。

@echo off
setlocal enabledelayedexpansion

:: Set the path to the cwebp executable
set CWEBP_PATH=

:: Set the target folder path
set TARGET_FOLDER=

:: Set the quality (0-100, where 100 is lossless)
set QUALITY=50

:: Loop through all PNG files in the target folder
for %%F in ("%TARGET_FOLDER%\*.png") do (
    :: Get the file name without extension
    set "filename=%%~nF"

    :: Convert PNG to WebP
    "%CWEBP_PATH%" -q %QUALITY% "%%F" -o "%TARGET_FOLDER%\!filename!.webp"

    if !errorlevel! equ 0 (
        echo Converted: %%F to !filename!.webp
    ) else (
        echo Failed to convert: %%F
    )
)

echo Conversion complete.
pause

参考