📌 一句话摘要

本文记录了一个营销网站从 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 辅助实现无障碍组件，并强调了贴近平台标准的长远优势。

💡 主要观点

1. 对于营销网站等静态内容为主的场景，React 的运行时开销是不必要的。 营销网站交互简单，使用 React 需要下载、解析并执行整套 SPA 框架，而原生 Web Components 和标准 DOM API 足以满足需求，且无额外负担。
2. nanotags 库作为 Custom Elements 的薄封装，显著提升了原生 Web Components 的开发体验。 nanotags 提供了类型安全的 Props 和 Refs、自动清理的副作用、类型化事件等功能，解决了手写 Web Components 时样板代码多、边界情况复杂的问题，且体积仅 2.5 KB。
3. 迁移至原生 Web Components 后，包体积减少了 100 KB，且无障碍体验并未退步。 通过利用 W3C 的 ARIA 指南和 LLM 辅助，作者实现了与 React 时期相当甚至更好的无障碍效果，同时大幅降低了 JavaScript 体积。

💬 文章金句

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

📊 文章信息

阅读完整文章