我尝试了以下方法来优化我的业余项目性能：
文本压缩代码分割现代图像格式.
分析器
我构建的应用程序使用了 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 个模块。dist/assets/index-b9quw17e.css 8.60 kb │ gzip: 2.33 kb
dist/assets/pausemenu-djz95k-6.js 1.77 kb │ gzip: 0.62 kb
dist/assets/index-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
减少未使用的 javascript
它影响fcp和lcp。
使用 google devtools 中的“覆盖率”选项卡查看未使用字节超过 20kbs 的脚本。
由于我将 vite 与 react 结合使用，代码拆分 是减少未使用的 javascript 的第一件事。
在 react 中， 和 lazy() 可以提供帮助。
使用 包裹整个 app 并提供后备 ui，如 loading，这会在应用加载时提供后备 ui。使用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 转换为 .webp 。
此命令以 50 的质量（0 是最差；100 是最好）转换 images/flower1.jpg 文件并将其另存为 images/flower1.webp。
压缩结果相当令人印象深刻。其中一个文件大小从 3.5 mb 到 178kb。即使是低信息强度的也能提供 4 倍压缩。
我们甚至可以编写一个简单的 .bat 脚本，自动将目标文件夹下的所有 .png 图片转换为 .webp 图片。
@echo offsetlocal enabledelayedexpansion:: Set the path to the cwebp executableset CWEBP_PATH=:: Set the target folder pathset TARGET_FOLDER=:: Set the quality (0-100, where 100 is lossless)set QUALITY=50:: Loop through all PNG files in the target folderfor %%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
登录后复制
参考
删除未使用的 javascript使用“覆盖范围”选项卡查看已使用和未使用的 css。 以现代格式提供图像。使用命令行创建 webp 图像预编译实用程序webp 图像格式 – 我可以使用最大内容油漆 (lcp)首次内容绘制 (fcp)
以上就是文本压缩和代码分割和现代图像格式 – 性能优化的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2646085.html
