Svelte

Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

什么是 Svelte？

Svelte 是一个构建 web 应用程序的工具。

Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，都怀揣着一颗让构建交互式用户界面变得更容易的心。

但是有一个关键的区别：Svelte 在 构建 / 编译阶段 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。

你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中。你还可以将组件作为独立的包（package）交付到任何地方，并且不会有传统框架所带来的额外开销。

Svelte 的适用场景

生态是技术选型一个很重要的考虑因素，Svelte 显然不是数一数二的选择，基本不用期望 Svelte 有什么现成的组件库。

我认为 Svelte 非常适合用来做活动页。活动页没有很复杂的交互，以渲染和事件绑定为主。我常常想做简单的活动页还用 React 也太委屈自己了吧。

另外一个很好的用法是用 Svelte 写的 UI 组件，可以包装成给不同框架用的组件。Svelte 暴露了足够的 API 可以适配到其它框架，比如写一个日历组件，然后分别包装成 React 和 Vue 的版本。

结论

我很喜欢 Rich Harris (Svelte 的作者) 的很多想法，在 YouTube 看他的演讲有很大的收获。你可以在下面的延伸链接找到更多有关 Svelte 的我认为不错的视频，十分推荐 Rethinking Reactivity 这个演讲（我在 Bilibili 没有找到搬运，所以只能贴上 YouTube 链接了）。

最后想说的是，学习一个框架或者一个语言，不一定是非要把它用到生产环境才算是有用。我很喜欢看新的技术和学不同的语言，更多地是因为想看看在面对同一个问题的时候，不同的人解决问题的思路是怎么样的，这才是框架和语言真正的魅力。比如说你不一定非要用 Elm, 但是你一定能从 Elm 的设计学到点什么。Svelte 也一样 :)

从数据中可以看出，两个框架在 bundle 大小方面具有不同的优势 —— 取决于您的使用情况。Svelte 仍然很棒，适用于一次性组件（例如，作为自定义元素包装），但它在大规模 APP 中在体积大小方面实际上是它的缺点，特别是SSR。

在更广泛的意义上，本研究旨在展示框架如何在compile-time 编译时和runtime spectrum 运行时找到一个平衡点：Vue 在源码上使用了一定的 compile-time 编译时 优化，但选择较重的 compile-time 返回较小的生成代码。Svelte选择最小的运行时，但具有较重生成的代码的成本。