不要优化你的 React 应用,而是使用 Preact
Preact - 默认性能优化
几个月前,我写了一篇关于优化 React 加载时间的文章,大多数读者的评论都是建议尝试Preact来获得默认的优化效果。所以我决定用上一篇文章中使用的应用程序来尝试 Preact。首先,让我们先来了解一下 Preact。
Preact 是一个 React 的替代库,拥有 React 的所有功能!Preact 库大小只有3KB。与 React 相比,它非常小巧,因为 React 和 React-dom 的 gzip 压缩包大小约为41KB(不包括基于bundlephobia的 React-scripts) 。Preact 的一些突出特性包括:
- 轻量级虚拟 Dom
- 体积小
- 默认优化性能
- 集成简单
- 默认的 PWA
现在让我们看看 preact 的实际作用。
我已经在 React 和 Preact 中开发了相同的应用程序来测试应用程序的性能。
对于 React 应用,我使用了Create React App;对于 Preact,我使用了preact-cli。Preact也提供了使用preact-compat将现有 React 应用转换为 Preact 的选项,但为了获得最佳效果,我还是决定从零开始构建一个应用。
为了比较这两个应用程序的性能,我使用了GTmetrix并将这两个应用程序托管在Netlify中。
React 应用性能
以下是GTMetrics对基于 React 的应用给出的评分。我在仪表盘组件中使用了基于路由的代码拆分。性能为80 % , B 级,最大内容绘制 ( LCP ) 和布局偏移 ( CLS ) 似乎较低。
如下图所示,整个页面加载耗时2 秒,首次内容绘制耗时约1 秒。看来性能还不错。
Preact 应用程序性能
所有指标都显示绿色!!!。看来同一个应用在 Preact 中获得了100% 的评分,并在 GTMetrix 中获得了A 级。最大内容绘制 ( LCP ) 时间小于500 毫秒,并且没有发生布局偏移 ( CLS )。
这看起来非常令人印象深刻。Preact 对我们的仪表盘应用进行了很好的优化。与 React 相比,性能大幅提升。让我们来检查一下加载时间。
如上图所示,整个应用加载耗时1.3 秒,首字节响应时间 ( TTFB ) 为179 毫秒!Preact 的速度比 React 快得多,而且默认处理所有事务。
对比页面加载情况,Preact 应用的加载速度远超 React,交互时间也比 React 应用更快。Preact 默认是渐进式 Web 应用(PWA),因此重复访问时可以立即加载。
Preact 还给出了一些有用的警告,注册包大小在构建过程中会增加,如下所示
悬念与懒惰
我在转换到 Preact 时遇到的一些限制是 Suspense 和延迟加载是实验性的,目前不支持生产。但路由目录默认启用基于路由的代码拆分。
参考
结论
根据以上比较,Preact 在各个方面都处于领先地位。由于库体积小且速度快,Preact 使我们能够专注于功能开发,而不是手动优化。
感谢您的阅读。
在Twitter上获取更多更新。
你可以给我买杯咖啡来支持我 ☕
电子书
使用 ChatGPT 调试 ReactJS 问题:50 个基本技巧和示例
更多博客
- 使用 Breeze 实现 React 应用的 Laravel Sanctum 身份验证
- 使用 Next.js、NextAuth 和 TailwindCSS 的 Twitter 关注者追踪器
- 如何构建你的 React Redux 应用
- 如何将 React 应用加载时间缩短 70%
- 使用 Next.js、Tailwind 和 Vercel 构建支持暗黑模式的投资组合
- React 中不再导入 ../../../
- 10 个 React 包,包含 1K 个 UI 组件
- 5 个软件包可在开发过程中优化和加速您的 React 应用
- 如何在 React 中以优化和可扩展的方式使用 Axios
- 15 个自定义 Hooks 让你的 React 组件更轻量
- 免费托管 React 应用的 10 种方法
- 如何在单页应用程序中保护 JWT