前端UI框架Svelte 4正式发布
Svelte 是一款类似 React、Vue 的前端 UI 框架。如名字所言, Svelte 的体积非常小,其作者 Rich Harris 表示,他设计 Svelte 的核心思想在于“通过静态编译减少框架运行时的代码量”。
性能
这个版本使 hydration 代码更小更快。为了看到其影响,SvelteKit 用户可以通过检查
.svelte-kit/output/client/_app/immutable/nodes 文件夹来看到其编译后的输出尺寸缩小。
例如,在 kit.svelte.dev 上,整个网站生成的 JS 大小减少了 12.7%。
Svelte 4 将 Svelte 包的大小减少了近 75%,这意味着在 npm install 上的等待时间减少了。
对于第一次在 learn.svelte.dev 上加载交互式学习体验的用户、Svelte REPL 的用户以及网络条件有限的用户来说,这一改进将尤为明显。剩下的大部分软件包大小是对 eslint 的支持,这就需要发布一个 CJS 构建,一旦 eslint 重写完成,Svelte 的软件包大小可以再下降 50% 以上。
Svelte 中依赖的数量已经从 61 个大大减少到 16 个。这意味着用户下载速度更快,也更不容易受到供应链攻击的影响。
开发者体验
Svelte 4 使 Svelte 的创作体验更加直观和一致: |local 现在是转换的默认值,以避免动画阻碍页面转换,预处理程序现在更容易编写,多项修正使 CSP 更容易设置和使用。
对于 Web 组件的用户来说,最大的变化是对你使用 Svelte 编写自定义元素的方式进行了全面修改。通过改变它们的生成方式,可以消除了一大类错误和不一致的地方。
最后,还做了几项改进 IDE 编写的体验:“cmd + 点击” svelte 模块现在可以带你到实现,而不是.d.ts 文件。从 svelte/internal 导入的文件现在被隐藏,不会干扰自动补全建议,自动导入现在更可靠。
更新了网站、文档和教程
官方 svelte.dev 网站已经进行了大改。它现在被分割成多个页面,并改进了导航、更新了 TypeScript 文档、黑暗模式和增强的 REPL。
SvelteKit 网站也在进行更新,以与之匹配。还更新了所有的教程链接,以指向新的 learn.svelte.dev。旧的教程仍然适用于 Safari 16.3 及以前的用户。
往期推荐
点这里 ↓↓↓ 记得 关注✔ 标星⭐ 哦