From Parcel to Vite: A short story of a 100K LOC migration · Logto blog

Logto 团队成功将三个前端项目从 Parcel 迁移到 Vite，迁移过程异常顺利。这三个项目包括登录体验、控制台和实时预览，全部使用 TypeScript、React 和 SASS 模块，总计约 100K 行代码。

迁移背景： Parcel 以其简单性和零配置设置受到团队喜爱。然而，Parcel 存在一些问题，如有时无法找到存在的块文件，需要为 monorepo 设置进行特殊配置，不支持 MDX 3 原生，不支持手动块。此外，Parcel 的最新版本 2.12.0 发布于 2024 年 2 月，之后没有新版本发布，团队认为它处于停滞状态。

为什么选择 Vite： Vite 通过 Vitest 获得了团队的关注，Vitest 提供了原生的 ESM 支持和与 Jest 的兼容性。

迁移现状：

• 使用 PNPM 管理 monorepo。
• 所有项目使用 ESM 模块。
• 所有项目使用 TypeScript 5.5.3 并设置路径别名。
• 所有前端项目使用 React 18.3.1。
• 使用 SASS 模块进行样式设计。
• 使用 SVG 作为 React 组件。
• 支持 MDX 并集成 GitHub Flavored Markdown 和 Mermaid。
• 实现了页面和组件的懒加载。
• 生产构建中生成压缩资产（gzip 和 brotli）。

迁移过程：

• 创建新的 Vite 项目并进行测试。
• Vite 原生支持 monorepo、ESM、TypeScript、React 和 SASS。
• 配置路径别名。
• 启用 React Fast Refresh 和 HMR。
• 将 SVG 转换为 React 组件。