告别 React，拥抱原生：借助 nanotags 完成迁移节省 100 KB

本文记录了一个营销网站从 React 迁移至原生 Web Components 的实践，并介绍了由此诞生的 nanotags 库，展示了如何用 2.5 KB 的轻量封装实现类型安全与响应式，同时节省 100 KB 的包体积。

文章作者分享了将一个使用 Astro、React 和 Ark UI 构建的营销网站迁移到原生 Web Components 的完整过程。作者指出，对于以静态内容为主的营销网站，React 的运行时开销是不必要的。迁移的核心是使用 Custom Elements 和标准 DOM API，并在此过程中提炼出 nanotags 库。该库作为 Custom Elements 的薄封装，提供了类型安全的 Props 和 Refs、自动清理的副作用、类型化事件等特性，显著提升了开发体验。迁移后，网站 JavaScript 体积减少了 100 KB，且无障碍体验并未退步。文章还探讨了如何利用 W3C 的 ARIA 指南和 LLM 辅助实现无障碍组件，并强调了贴近平台标准的长远优势。

- 对于营销网站等静态内容为主的场景，React 的运行时开销是不必要的。 营销网站交互简单，使用 React 需要下载、解析并执行整套 SPA 框架，而原生 Web Components 和标准 DOM API 足以满足需求，且无额外负担。

- 营销网站本质是静态的，何须背负框架运行时？

• React 的默认技术栈是为 SPA 而生的，不是为营销网站。
• Web Components 是平台的一部分。Custom Elements API 自 2018 年起便在所有现代浏览器中保持稳定。
• nanotags 是 Custom Elements 的一层薄封装。它不替代任何东西，只是剔除了编写 Web Components 时那些枯燥乏味的部分。
• 你的代码和浏览器之间也没有任何运行时横亘其中。

AI 初评：87

来源：前端早读课

作者：前端早读课

分类：软件编程

语言：中文

阅读时间：24 分钟

字数：5967

标签： Web Components, React, 前端性能优化, Custom Elements, Astro

阅读完整文章