不要优化你的 React 应用,而是使用 Preact

2025-05-25

不要优化你的 React 应用,而是使用 Preact

Preact - 默认性能优化

几个月前,我写了一篇关于优化 React 加载时间的文章,大多数读者的评论都是建议尝试Preact来获得默认的优化效果。所以我决定用上一篇文章中使用的应用程序来尝试 Preact。首先,让我们先来了解一下 Preact。

Preact 是一个 React 的替代库,拥有 React 的所有功能!Preact 库大小只有3KB。与 React 相比,它非常小巧,因为 React 和 React-dom 的 gzip 压缩包大小约为41KB(不包括基于bundlephobia的 React-scripts) 。Preact 的一些突出特性包括:

  1. 轻量级虚拟 Dom
  2. 体积小
  3. 默认优化性能
  4. 集成简单
  5. 默认的 PWA

现在让我们看看 preact 的实际作用。

我已经在 React 和 Preact 中开发了相同的应用程序来测试应用程序的性能。

反应

ReactJS

预行动

预行动

对于 React 应用,我使用了Create React App;对于 Preact,我使用了preact-cli。Preact也提供了使用preact-compat将现有 React 应用转换为 Preact 的选项,但为了获得最佳效果,我还是决定从零开始构建一个应用。

为了比较这两个应用程序的性能,我使用了GTmetrix并将这两个应用程序托管在Netlify中。

React 应用性能

以下是GTMetrics对基于 React 的应用给出的评分。我在仪表盘组件中使用了基于路由的代码拆分。性能为80 % , B 级,最大内容绘制 ( LCP ) 和布局偏移 ( CLS ) 似乎较低。

React-p

如下图所示,整个页面加载耗时2 秒,首次内容绘制耗时约1 秒。看来性能还不错。

react-lt

ReactJS 加载框架

Preact 应用程序性能

所有指标都显示绿色!!!。看来同一个应用在 Preact 中获得了100% 的评分,并在 GTMetrix 中获得了A 级。最大内容绘制 ( LCP ) 时间小于500 毫秒,并且没有发生布局偏移 ( CLS )。

preact-p

这看起来非常令人印象深刻。Preact 对我们的仪表盘应用进行了很好的优化。与 React 相比,性能大幅提升。让我们来检查一下加载时间。

preact-lt

PREACT 加载框架

如上图所示,整个应用加载耗时1.3 秒,首字节响应时间 ( TTFB ) 为179 毫秒!Preact 的速度比 React 快得多,而且默认处理所有事务。

React-PC

预行动

preact-pc

ReactJS

对比页面加载情况,Preact 应用的加载速度远超 React,交互时间也比 React 应用更快。Preact 默认是渐进式 Web 应用(PWA),因此重复访问时可以立即加载。

脉冲式水射流

Preact 还给出了一些有用的警告,注册包大小在构建过程中会增加,如下所示

警告

悬念与懒惰

我在转换到 Preact 时遇到的一些限制是 Suspense 和延迟加载是实验性的,目前不支持生产。但路由目录默认启用基于路由的代码拆分。

参考

  1. 预行动
  2. 与 React 的区别

结论

根据以上比较,Preact 在各个方面都处于领先地位。由于库体积小且速度快,Preact 使我们能够专注于功能开发,而不是手动优化。

感谢您的阅读。

在Twitter上获取更多更新

你可以给我买杯咖啡来支持我 ☕

电子书

使用 ChatGPT 调试 ReactJS 问题:50 个基本技巧和示例

ReactJS 优化技术和开发资源

更多博客

  1. 使用 Breeze 实现 React 应用的 Laravel Sanctum 身份验证
  2. 使用 Next.js、NextAuth 和 TailwindCSS 的 Twitter 关注者追踪器
  3. 如何构建你的 React Redux 应用
  4. 如何将 React 应用加载时间缩短 70%
  5. 使用 Next.js、Tailwind 和 Vercel 构建支持暗黑模式的投资组合
  6. React 中不再导入 ../../../
  7. 10 个 React 包,包含 1K 个 UI 组件
  8. 5 个软件包可在开发过程中优化和加速您的 React 应用
  9. 如何在 React 中以优化和可扩展的方式使用 Axios
  10. 15 个自定义 Hooks 让你的 React 组件更轻量
  11. 免费托管 React 应用的 10 种方法
  12. 如何在单页应用程序中保护 JWT
文章来源:https://dev.to/nilanth/dont-optimize-your-react-app-use-preact-instead-30og
PREV
如何使用 React Router 创建公共和私有路由
NEXT
使用 Next.js、Tailwind 和 Vercel 构建支持暗黑模式的投资组合