前端早读精选: React Compiler 终于来了、实时通信技术方案对比、使用 Bun 最佳场景

探索前端技术的无尽旅程从这里开始！每周精选前端领域的热门文章。

文章推荐：前后端实时通信的几种方案对比、对比 NodeJS，Bun更适合的几个关键场景、对比 dotenv，Node v20.6 以后的新版本更优雅的处理方式、苦等三年，React Compiler（原来叫 React Forget）终于来了。

工具推荐：vspace 浏览器标签管理工具、ElysiaJS 基于 Bun 的服务端框架、DashPlayer 学习英语的好帮手

行业新闻：React Conf 2024 都有啥、Google AI 视频方案 Veo

如果觉得有收获，欢迎大家点赞👍🏻订阅

文章推荐

ws、sse、polling、webrtc、webtransport 对比

这篇文章比较了几种用于实时Web应用的技术，包括长轮询（Long-Polling）、WebSockets、服务器发送事件（SSE）、WebRTC和WebTransport。文章详细介绍了每种技术的工作原理、优缺点和适用场景。长轮询适用于低效率的后备机制，WebSockets适合需要双向通信的场景，SSE适合单向服务器到客户端的实时更新，WebTransport是未来的高效通信技术，而WebRTC主要用于点对点通信。文章还讨论了这些技术在性能、延迟、吞吐量和可扩展性方面的比较。

👉🏻 原文链接：ws、sse、polling、webrtc、webtransport 对比

何时使用 Bun 而不是 NodeJS

文章讨论了在某些场景下使用 Bun 代替 Node.js 的优势。Bun 是一种新兴的 JavaScript 运行时，因其卓越的性能和内置功能而受到关注。以下是文章中提到的几个关键场景及其对比 Node.js 的优势：

1. 性能需求高：由于使用 Zig 语言编写，Bun 比 Node.js 更快，启动速度快 4 倍，包管理速度快 25 倍。
2. 需要一体化解决方案：Bun 内置了包管理器、测试工具和打包器，提供统一的开发体验。
3. 模块解析复杂：提供一致的模块解析系统，兼容 CommonJS 和 ES 模块，简化了模块间的互操作性。
4. 需要高效的内置数据库：集成了高性能的 SQLite 驱动，适合作为内部数据库使用。
5. 需要未来可切换到 Node.js 的灵活性：设计为与 Node.js 兼容，便于在需要时切换到 Node.js。

👉🏻原文链接: 何时使用 Bun 而不是 NodeJS

你可能并不需要dotenv

在 Node.js 20.6.0版本发布后，Node.js 现在原生支持 .env 文件加载，使开发者不再需要使用外部包如 dotenv 来管理环境变量。通过使用 --env-file 标志可以轻松加载 .env 文件，简化配置过程并提升性能和安全性。

举个🌰：假设有一个名为 config.env 的文件，内容如下：

`NODE_OPTIONS='--title="Testing Node v20.6.0"' USER_NAME='John Doe'`

你可以使用以下命令来加载这个文件，config.env文件中的变量将被加载到process.env`

`node --env-file=config.env index.js`

👉🏻原文链接：你可能并不需要dotenv

苦等三年，React Compiler 终于能用了。使用体验：很爽，但仍有瑕疵

React Compiler（原名 React Forget）终于在 React Conf 2024 开源。它通过缓存未变更的组件，解决了 React 中冗余的 re-render 问题，从而提升性能。React Compiler 集成于代码自动编译中，使用时不改变现有开发方式。可以通过react-compiler-healthcheck来对老代码进行检查，判断其兼容性。此外 React Compiler 还支持局部使用，通过配置可以仅针对某些文件夹进行 compiler 优化，适用于多种开发环境（如 Vite、Next.js、Remix、Webpack）。虽然有时会遇到问题，但总体上提升了开发体验和性能，尤其对新项目和初学者更友好。

👉🏻原文链接：苦等三年，React Compiler 终于能用了。使用体验：很爽，但仍有瑕疵

工具推荐

vspace

VSpace 是一个在浏览器侧边栏上实现的垂直式的书签和标签页管理器扩展，灵感来源于 Arc 浏览器，目的是在非 Arc 浏览器上（主要是 Chrome）做到更好的的侧边栏体验。

• 适合人群

  • 对浏览器自带的书签管理功能不满意，想要更好的体验
  • 想要在本身不支持垂直标签页的浏览器上使用垂直标签页
  • 想要在其它 chromium 浏览器上体验类似 Arc 浏览器侧边栏功能

• 浏览器支持

  • Chrome 完全支持
  • Edge 支持，但侧面板无法设置到左侧，因为 Edge 不支持
  • Arc 不支持，因为 Arc 浏览器本身不支持侧边栏扩展
  • FireFox 不支持
  • 其它 chromium 浏览器 没有测试，理论上只要支持侧边栏的就支持

👉🏻工具地址：vspace

ElysiaJS

ElysiaJS 是一个优化了高性能和开发者体验的 TypeScript 框架。其主要优点包括：

1. 速度快：比 Express 快21倍，利用 Bun 运行时和动态代码注入。
2. 类型安全：确保端到端的类型安全，自动类型推断。
3. 简洁：代码简洁，轻松处理响应并集成 OpenAPI/Swagger 进行文档化。
4. 生产力高：内置验证和统一类型系统，减少样板代码。
5. 社区和插件：广泛的插件支持和强大的社区。

👉🏻工具地址：ElysiaJS

DashPlayer

一款专为英语学习打造的视频播放器。DashPlayer 的目标就是方便你观看英文视频。无论你是想泛听，还是想一句句精听，亦或是想要查询生词，DashPlayer 精心打磨的手感让您始终心情愉悦。

• 双语字幕：支持机器翻译字幕。只展示中文/英文，或者全部隐藏都可以。
• 按字幕跳转： 重复当前句，或者跳到上一句，怎么跳都可以。
• 查词查询：鼠标悬停生词可快速查询，不打断学习进程。
• 可调整界面尺寸： 界面尺寸可调，适应不同屏幕和学习场景。
• 记录播放位置： 自动记录上次播放位置，方便下次接着学习。
• 蓝牙遥控操作： 支持蓝牙遥控，让你随时调整音量、跳转视频，学习更轻松！
• 夜间模式：内置暗色/亮色主题，适配您的学习环境。
• AI 字幕：可以使用 AI 为视频生成字幕。
• 长视频切分：看一段删一段，没有压力。
• 视频下载：粘贴视频链接，下载视频。

👉🏻工具地址：DashPlayer

行业新闻

📹 react Conf 2024

React Conf 2024的主要内容围绕React 19的发布以及React团队当前的一些重点工作,如React编译器和React服务器组件。

要说最近前端圈最热的是什么，那当然是 React Conf 2024 了。快点击视频了解一下吧

google-veo

Veo 是 Google DeepMind 开发的先进视频生成模型，能够生成1080p高分辨率、长时长的高质量视频。它支持广泛的电影和视觉风格，准确捕捉提示的细微差别，并提供创意控制。Veo 旨在使视频制作更易于访问，解锁叙事、教育等领域的新可能性。

PS：Google 的视频解决方案的热度远远低于 OpenAI 的 Sora。🤔🤔🤔