Skip to main content

Svelte 的最新动态：2024 年 8 月

显著的 hydration 性能提升、自定义警告和一个新 API：createRawSnippet

Dani Sandoval

随着 Svelte 5 发布的临近，我们在性能和可定制性方面取得了一系列巨大的改进。本月的更新中还包括一些 SvelteKit 的小更新，以及 Svelte Dev Vlog 的回归。

让我们深入了解一下吧！

Svelte 的最新动态

以下是 Svelte 5 版本更新记录中的亮点（当前处于 Release Candidate 阶段）：

  • 重大变更：svelte/reactivity 辅助函数的名称已更新，添加了 Svelte 前缀（5.0.0-next.169，文档 #12248）
  • 分支效果现在拥有更好的 DOM 边界，减少了 {#each} 块中的错误以及 DOM 操作期间的问题（5.0.0-next.171 和 5.0.0-next.182，#12215，#12258，#12383）
  • 单次 hydration 显著减少了 DOM 的大小并大幅提升了 hydration 速度（5.0.0-next.179，#12335，#12339）
  • 重大变更：过渡动画默认在挂载时播放（5.0.0-next.177，#12351）
  • 当启用 css: 'injected' 编译选项时，CSS 现在可以包含在 <head> 中。这使得在渲染邮件和 OG 卡片等内容时包含样式变得非常简单，同时也极大地简化了无法从服务器渲染的 HTML 中获取 CSS 的实验性配置（5.0.0-next.180，文档，#12374）
  • Svelte 现在会在开发模式下对 {@html ...} 块的 hydration 不匹配给出警告（5.0.0-next.182，#12396）
  • 新的 warningFilter 编译选项允许您为整个应用程序禁用某些警告，而无需在各处添加 svelte-ignore 注释（5.0.0-next.186，#12296）
  • 新的 createRawSnippet API，允许在 Svelte 模版之外以底层的方式创建程序化片段（5.0.0-next.189，文档，#12425）

SvelteKit 及其他生态的最新动态

  • 表单的 HTML 属性 enctype 和 formenctype 现在已在使用 use:enhance 时得到支持（以及一些其他的修复，详见 更新日志）
  • Cloudflare、Cloudflare Workers、Netlify 和 Vercel 适配器现已更新，在打包时会复制 .eot、.otf、.ttf、.woff、.woff2 等字体文件（更新日志）
  • 几乎每个 Svelte 项目都会使用的工具 svelte-preprocess 现在无需任何依赖！团队已经逐步将其依赖从 5.0.0 中的 44 个减少为最新版本中的 0 个（推文）
  • 在 Cloudflare Pages 适配器中，预渲染的重定向现在将追加到 _redirects 文件中（adapter-cloudflare@4.7.0，#12199）

社区展示

使用 Svelte 构建的应用和网站

  • StackOverflow 2024 开发者调查 结果网站使用 Svelte 构建。更棒的是，结果显示 73% 的开发者希望继续使用 Svelte（更多信息见 推文）
  • azigy 是一个实时、多玩家的测验和问答应用
  • on-device-transcription 是一个可用的简单应用，可将语音转换为文本
  • Whispering 是一个开源的转录应用程序，提供全球语音转文字功能
  • Frogment 是一个 OpenAPI 规范编辑器
  • SticAI Glance 总结 Reddit 帖子为可执行的洞察
  • Over Rice 跟踪纽约市最好的清真食品车
  • earbetter 是一个耳朵训练工具，支持音乐和音频的演奏和编程
  • Moonglow 是一个使用 GPGPU 的深度行星模拟
  • opml-editor 是一个在线 OPML 编辑器，便于管理订阅列表
  • Praxis 是一个 AI 驱动的交易日志，分析您的交易并发现模式
  • Lokal 允许您通过公共和 HTTPS 的 .local 地址共享您的 localhost
  • formcrafts 让您创建出色的表单，如申请表、潜在客户生成表、问卷、付款表单等
  • Shootmail 是一个以模板优先的邮件平台，带有调度和分析功能
  • Supersaw 是一个开源的 Web 在线数字音频工作站（DAW）

学习资源

由 Svelte 贡献者和大使提供

推荐阅读

推荐观看

库、工具与组件

以上就是本月的全部内容！如果我们遗漏了内容，欢迎前往 Reddit 或 Discord 告诉我们。

下个月见 👋