Svelte初体验

Svelte初体验

Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作,而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。
与使用虚拟(virtual)DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。

Svelte 官方文档

看起来很美好,tutorial 看一遍,上手重构了一下我的图库页面,以下是编译包大小以及浏览器加载大小对比,可以看到 Bundle Size 减小不少(此处 Vue 的 Bundle 包还应减去一个 100k 的图片资源,在 Svelte 项目中我使用外链引入了)。
两个项目使用完全相同的 HTML、CSS 结构,都添加了 Lodash、Axios。
图库页面Vue和Svelte编译包大小对比
Vue页面JS加载大小
Svelte页面JS加载大小


踩了什么坑:

  1. .env 环境变量 可以参考此文解决
  2. 自定义组件名称需要首字母大写

掘金网友分享了在 Vue 中优雅的使用 Svelte 的方法