关于Svelte的一点了解

Svelte了解及优势

Svelte 是一个 无运行时系统 的框架。

1. 编译器

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

2. 打包体积更小

下面是Jacek Schae大神的统计，使用市面上主流的框架，来编写同样的论坛demo 应用的体积：

项目体量增大的时候，Svelte 确实有一个阈值会使得它在一定程度后让体积大小没有了优势，但是在一般情况下，只要不是特别复杂的中后台管理应用，Svelte 应当会比其他框架体积小。
特别是在一些 H5 游戏中，如果你想要获得 React/Vue 数据驱动的方式编写应用，但是你又不想要引入他们这么大的运行时，确实来说是一个非常不错的方案。

3. 不使用 Virtual DOM

Virtual DOM 就是 虚拟DOM，是用 JS 对象描述 DOM 节点的数据，由 React 团队推广出来的。
Svelte 在未使用虚拟DOM的情况下实现了响应式设计，底层应该依旧使用了diff算法

4. 更自然的数据的响应式

这也是我刚接触 Svelte 时立刻喜欢上的理由。这里说的响应式设计是只关于数据的响应，而不是像 Bootstrap 的响应式布局。
现在流行的前端框架基本都使用 数据驱动视图 这个概念，像 Vue 和 React 这些框架，都有响应式数据的概念。但 Vue 和 React 在数据响应方面还是有点“不那么自然”，我简单举几个例子：

• 在 传统React 中，如果需要更新数据并在视图中响应，需要使用 setState 方法更新数据。
• 在 Vue2 中，响应式数据要放在data 里，在 methods 中使用 this.xxx 来更新数据。
• 在 Vue3 的 Composition API 语法中，需要使用 ref 或者 reactive 等方法包裹数据，使用 xxx.value 等方式修改数据。

上面这几种情况，感觉多少都添加了点东西才能实现响应式数据功能（至少在普通开发者开发时是这样）。

在 Svelte 的理念中，响应式应该给开发者一种无感体验，比如当我规定 C的值是 A + B 的和，设置好规则后，用户只需要修改 A 和 B 即可，C 会自动响应，而不需再做其他操作。

5. 性能强

对比多个热门框架的性能，Svelte 是相当优秀的。
非运行时的框架，对于首屏的渲染也是有一个极大的帮助，你可以将首屏组件进行拆分，非运行时的首屏组件其实是非常小的，这对移动端来说非常的友好，因为毕竟使用 SSR 对服务端还是有一定的压力要求的。

6. 内存优化

Svelte 对内存的管理做到非常极致，占用的内存也是非常小，这对于配置不高的设备来说是件好事。

7. 更关注无障碍体验

在使用 Svelte 开发时会 自动对无障碍访问方面的体验进行检测，比如 img 元素没有添加 alt 属性，Svelte 会向你发出一条警告。无障碍体验对特殊人事来说是很有帮助的，比如当你在 img 标签中设置好 alt 属性值，使用有声浏览器会把 alt 的内容读出来。

Svelte + Vite 创建项目

# 1、下载模板的命令
npm init vite@latest

# 2、输入项目名

# 3、选择 Svelte 模板

# 4、进入项目并安装依赖
npm install

# 5、运行项目
npm run dev

# 6、在浏览器访问

demo地址：https://codesandbox.io/dashboard