从 Vue 2 迁移到 Svelte

站长

2024年03月22日 20:48 · 阅读数 3

大家好，这里是大家的林语冰。

本周之后，Vue 2 将停止开源维护。所以本期《前端翻译计划》共享的是某企业去年从 Vue 2 迁移到 Svelte 的现实测评，以及 Vue 3 和 Svelte 的“零和博弈”。

在使用 Vue 2 作为我们的前端框架近 2 年后，我们宣布此支持将不再维护，因此我们决定迁移到新框架。但该选谁呢：Vue 3 还是 Svelte 呢？

粉丝请注意，我们迁移后的目标也是改善 DX（开发体验），尤其是类型检查、性能和构建时间。我们没有考虑 React，因为它需要投资一大坨时间成本来学习，而且与 Vue 和 Svelte 不同，它没有提供开箱即用的解决方案。此外，后者共享相同的 SFC（单文件组件）概念：同一文件中的逻辑（JS）、结构（HTML）和样式（CSS）。

Svelte vs Vue 3

Svelte 的留存率更高。对于我们的新前端，我们必须从市场上可用的 2 个框架权衡，即 Svelte 和 Vue 3。下面是过去 5 年不同框架留存率的图示（留存率 = 会再次使用/(会再次使用 + 不会再次使用)）。JS 现状调查汇编了该领域开发者的数据，如你所见，Svelte 排名第二，而 Vue 3 排名第四。

从 Vue 2 迁移到 Svelte

这启示我们，过去使用过 Svelte 的开发者愿意再次使用它的数量比不愿使用它的要多。

Svelte 的类型体验更棒。

	Vue 2	Vue 3	Svelte
组件级类型	Yes	Yes	No
跨组件类型	No	Yes	Yes
类型事件	No	No	Yes

Svelte 通过更简单的组件设计流程和内置类型事件提供了更好的类型体验，对我们而言十分用户友好。

全局变量访问限制。使用 Svelte，可以从其他文件导入枚举，并在模板中使用它们，而 Vue 3 则达咩。

从 Vue 2 迁移到 Svelte

语法。就我个人而言，私以为 Svelte 语法比 Vue 更优雅和用户友好。您可以瞄一下下面的代码块，并亲自查看它们。

Svelte：

从 Vue 2 迁移到 Svelte

Vue：

从 Vue 2 迁移到 Svelte

没有额外的 HTML div <template>。在 Svelte 中您可以直接编写自己的 HTML。

样式在 Svelte 中会自动确定作用域，这对于可维护性而言是一个优点，且有助于避免 CSS 副作用。每个组件的样式独立，能且仅能影响该组件，而不影响其父/子组件。

更新数据无需计算属性。在 Svelte 中，感觉更像在用纯 JS 撸码。您只需要专注于编写一个箭头函数：

const reset = () => {
  firstName = ''
  lastName = ''
}

Svelte 中只需单个括号:

//Svelte
{fullName}

//Vue
{{fullName}}

添加纯 JS 插件更简单。此乃使用 Svelte 和 Prism.js 的语法高亮集成用例，如下所示：

从 Vue 2 迁移到 Svelte

无需虚拟 DOM 即可编译代码。Svelte 和 Vue 之间的主要区别是，减少了浏览器和 App 之间的层数，实现更优化、更快的任务成果。

自动更新。诉诸声明变量的辅助，Svelte 可以自动更新您的数据。这样，您就不必等待变更反映在虚拟结构中，获得更棒的 UX（用户体验）。

Svelte 也有短板

理所当然，Svelte 也有短板，比如社区相对较小，因为它是 2019 年才诞生的。但随着越来越多的开发者可能会认识到其质量和用户友好的内容，支持以及社区未来可能会不断发展壮大。

因此，在审查了此分析的结果后，尽管 SvelteKit 在迁移时仍处于积极开发阶段，我们决定使用 Svelte 和 Svelte Kit 砥砺前行。

从 Vue 2 迁移到 Svelte

如何处理迁移呢？

时间：我们选择在 8 月份处理迁移，当时该 App 用户较少。

时间长度：我们花了 2 周时间将所有文件从 Vue 迁移到 Svelte。

开发者数量：2 名前端开发者全职打工 2 周，另一名开发者全职打工 1 周，因此涉及 3 名开发人员。

工作流：首先，我们使用 Notion 工具将我们的凭据归属于团队的开发者。然后，我们开始在 Storybook 中创建新组件，最后，每个开发者都会奖励若干需要在 Svelte 中重写的页面。

作为一家初创公司，迁移更简单，因为我们没有 1_000 个文件需要重写，因此我们可以快速执行。虽然但是，当 SvelteKit 仍处于积极开发阶段时，我们就冒着风险开始迁移到 SvelteKit，这导致我们在迁移仅 1 个月后就不得不做出破坏性更新。但 SvelteKit 专业且博大精深的团队为我们提供了一个命令（npx svelte-migrate routes），以及一个解释清晰的迁移指南，真正帮助我们快速适应新的更新。

此外，9 月份，SvelteKit 团队宣布该框架终于进入候选版本阶段，这意味着，它的稳定性现在得到了保证！

文件和组件组织：

SvelteKit 的“文件夹筑基路由”给我们带来了很多。我们可以将页面拆分为子页面，复用标准变量名，比如 loading/submit 等等。此外，布局直接集成到相关路由中，由于树内组织的增加，访问起来更简单。

那么我们得到了什么？

除了上述好处之外，还值得探讨其他某些关键因素：

性能提高且更流畅。编译完成后，我们可以体会到该 App 的轻量级。与其他框架相比，这提高了加载速度，其他框架在 App 的逻辑代码旁嵌入了“运行时”。

DX 更棒。SvelteKit 使用 Vite 打包器，此乃新一代 JS 构建工具，它利用浏览器中 ES 模块的可用性和编译为原生（compile-to-native）的打包器，为您带来最新 JS 技术的最佳 DX。

代码执行更快。它没有虚拟 DOM，因此在页面上变更时，需要执行的层数少了一层。

启动并运行 SSR（服务器端渲染）。如果最终用户没有良好的互联网连接或启用 JS，平台仍将在 SSR 的帮助下高效运行，因为用户仍能加载网页，同时失去交互性。

代码简洁易懂。Svelte 通过将逻辑（JS）、结构（HTML）和样式（CSS）分组到同一文件中，可以使用更具可读性和可维护性的面向组件的代码。黑科技在于所有这些元素都编译在 .svelte 文件中。

固定类型检查。自从我们迁移到 Svelte 以来，我们已经成功解决了类型检查的最初问题。事实上，我们以前必须处理周期性的通知，而如今时过境迁。不再出现头大的哨兵错误。（见下文）

从 Vue 2 迁移到 Svelte

粉丝请注意，此博客乃之前的迁移测评，其中某些基准测试见仁见智，尤大还亲自码字撰写博客布道分享，我们之后会继续翻译 Vue 官方博客详细说明。

免责声明

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考，英文原味版请传送 Migrating from Vue 2 to Svelte。

您现在收看的是《前端翻译计划》，学废了的小伙伴可以订阅此专栏合集，我们每天佛系投稿，欢迎关注地球猫猫教。谢谢大家的点赞，掰掰~

从 Vue 2 迁移到 Svelte