我们将 Angular 18 应用重写为 React 20，开发者效率提升了 40%

Source: Dev.to

（请提供您希望翻译的完整文本内容，我将为您翻译成简体中文并保持原有的格式、Markdown 语法以及技术术语不变。）

为什么我们从 Angular 18 迁移

我们的 Angular 18 应用已经增长到超过 400 个组件，使用了 NgRx 进行状态管理、自定义 RxJS 操作符以及复杂的依赖注入树。虽然 Angular 在早期表现良好，但我们遇到了多个扩展痛点：

• 构建时间膨胀至 8+ 分钟，完整的生产构建导致 CI/CD 流水线和开发者反馈循环变慢。
• 新员工需要 3+ 周 才能熟悉 Angular 的约定式结构、RxJS 响应式模式以及 Ivy 编译器的细节。
• 主入口点的 bundle 大小增长到 2.1 MB，在网络较慢的用户端导致加载时间变长。
• 自定义指令和管道的维护成为瓶颈，因与 Angular 内部 API 紧密耦合。

我们评估了多种方案，包括升级到 Angular 19，但最终选择了 React 20，因为它拥有灵活、非约束的结构、成熟的生态系统，以及并发渲染、Server Components 和改进的 Suspense 支持等新特性。

我们的迁移流程

我们选择了分阶段的完整重写，而不是增量的微前端采用，因为应用的高度耦合使得增量改动风险较大。我们的 6 个月时间表分为三个阶段。

第 1 阶段：审计与规划（4 周）

• 将所有 400 多个 Angular 组件映射到对应的 React 组件。
• 文档化状态管理流程，并识别出需要迁移到 React 的 12 个自定义 Angular 指令。
• 在两个技术栈上统一使用 TypeScript 严格模式，以最小化类型迁移工作量。
• 选定支持库：Redux Toolkit（取代 NgRx）、React Router 7 用于路由，以及 React Testing Library 用于单元测试。

第 2 阶段：核心构建与并行开发（16 周）

• 首先构建所有核心组件的 React 等价实现，包括我们的设计系统、认证流程和仪表盘框架。
• 使用自定义 codemod 自动转换 60 % 的简单 Angular 组件为 React，然后手动迁移复杂逻辑。
• 将 Angular 应用保持在维护模式；新功能在 React 中通过功能标记实现，以避免干扰正在进行的工作。

第 3 阶段：切换与验证（4 周）

• 对两个应用进行并行负载测试，修复了 React 构建中的 14 个关键缺陷。
• 实施加权流量迁移（10 % → 50 % → 100 %），实现零停机切换。
• 在切换后将 Angular 代码库设为只读模式 2 周作为回退方案，但最终未曾使用。

关键结果

我们使用三个核心指标来衡量开发者速度：每个冲刺完成的 story points、PR 周期时间和构建时间。运行 3 个月的 React 20 后得到的结果：

• 开发者速度提升了 40 %：我们 12 人的团队从每个冲刺完成 85 个 story points 增至 119 个。
• PR 周期时间 从 3.2 天降至 1.4 天，得益于更简洁的组件逻辑和更快的测试运行。
• 完整生产构建时间 从 8.1 分钟下降到 2.3 分钟，降低了 71 %。
• 新员工上手时间 从 3 周缩短到 1 周，因为 React 更简洁的思维模型和更丰富的社区资源简化了入职培训。
• 主包大小 缩小了 32 %，至 1.4 MB，使全球用户的首次加载时间降低了 27 %。

经验教训

• 提前定义明确的成功指标——将重写与速度和性能目标挂钩，确保了利益相关者的认同并让团队保持一致。
• React 20 的服务器组件带来了意想不到的收益——我们消除了 60 % 静态页面的客户端渲染，提升了 SEO 并降低了客户端 JavaScript 的负载。
• 不要低估状态管理迁移的难度——由于复杂的 RxJS 可观察链，将 NgRx 流迁移到 Redux Toolkit 的时间是预估的 3 倍。
• 并发渲染提升了重交互的用户体验——我们拥有 10k+ 行的数据表现在可以在不阻塞主线程的情况下渲染，这一直是我们 Angular 架构中的常见痛点。

Conclusion

重写是一项巨大的投入，但40 % 的速度提升已经在四个月内收回了开发时间。我们的团队报告了更高的工作满意度，功能交付更快，用户也获得了更快、更可靠的应用。如果你的团队在使用 Angular 时遇到类似的扩展痛点，React 20 是一个值得评估的有吸引力的替代方案。