我尝试了以下方法来优化我的业余项目性能：
我构建的应用程序使用了 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 kBVite-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
它影响FCP和LCP。
使用 Google DevTools 中的“覆盖率”选项卡查看未使用字节超过 20kbs 的脚本。
由于我在 React 中使用 Vite，代码拆分 是减少未使用的 JavaScript 的第一件事。
在 React 中，
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 图片。
viteCompression({
verbose: true,
disable: false,
algorithm: 'brotliCompress',
ext: '.br',
}),
以上是文本压缩和代码分割和现代图像格式 - 性能优化的详细内容。更多信息请关注PHP中文网其他相关文章！
