Svelte 和 SvelteKit 更新：2025 年夏季回顾

使用 Svelte 的前端开发者见证了一个变革性的夏天。这个框架迄今为止最重要的演进带来了异步组件、服务端 Remote Functions，以及成熟的基于 Runes 的响应式系统，从根本上改变了我们构建响应式应用程序的方式。

本回顾涵盖了 2025 年夏季的核心 Svelte 5 更新，重点关注影响您日常开发工作流程的功能。无论您是在迁移现有项目还是在评估 Svelte 用于新项目，这些变化都代表了开发者体验和应用程序性能的重大飞跃。

异步组件：现代 Svelte 的基础

异步组件的引入标志着 Svelte 最大的架构转变。与 React 的 Suspense 或 Vue 的异步组件不同，Svelte 的实现编译掉了复杂性，为您留下了干净、高性能的代码。

<!-- 现在您可以在组件中直接 await -->
<script>
  const data = await fetch('/api/user').then(r => r.json())
</script>

<h1>欢迎，{data.name}</h1>

这个看似简单的变化消除了整个类别的样板代码。不再需要用于数据获取的 onMount 钩子，不再需要手动管理加载状态——只需自然地编写异步代码。编译器处理其余部分，生成自动管理加载状态的优化 JavaScript。

Remote Functions：无复杂性的全栈类型安全

SvelteKit 的 Remote Functions 带来了类型安全的服务器通信，无需 GraphQL 的开销或 tRPC 的复杂性。这些函数专门在服务器上运行，但可以从应用程序的任何地方调用。

// server/db.js
import { remote } from 'sveltekit/remote'
import { db } from '$lib/database'

export const getUser = remote(async (userId) => {
  return await db.user.findUnique({ where: { id: userId } })
})

<!-- +page.svelte -->
<script>
  import { getUser } from '../server/db.js'
  
  let user = $state()
  
  async function loadUser(id) {
    user = await getUser(id) // 类型安全，在服务器上运行
  }
</script>

美妙之处在于简洁性。无需维护 API 路由，无需手动类型定义——只是在客户端-服务器边界上工作的函数，具有完整的 TypeScript 支持。

Runes：有意义的响应式

现在稳定且功能完整的 Runes 系统提供了一个既强大又直观的响应式模型。如果您来自 React 的 hooks 或 Vue 的组合式 API，Runes 会让您感到耳目一新的直接。

实践中的核心 Runes

$state 替代响应式声明：

// 旧的 Svelte 4
let count = 0
$: doubled = count * 2

// Svelte 5 与 Runes
let count = $state(0)
let doubled = $derived(count * 2)

$effect 处理副作用，无需依赖数组：

let query = $state('')

$effect(() => {
  // 自动跟踪 'query' 使用
  const results = searchDatabase(query)
  console.log(`找到 ${results.length} 个结果`)
})

$props 简化组件接口：

// 带默认值的清洁属性处理
let { name = 'Anonymous', age = 0 } = $props()

关键优势？Runes 使响应式变得显式且可预测。没有隐藏的魔法，没有意外的重新渲染——只有您可以推理的清晰数据流。

OpenTelemetry：生产就绪的可观测性

SvelteKit 现在通过 instrumentation.server.ts 内置 OpenTelemetry 支持。这不仅仅是日志记录——这是全面的应用程序可观测性。

// instrumentation.server.ts
import { registerInstrumentations } from '@opentelemetry/instrumentation'
import { HttpInstrumentation } from '@opentelemetry/instrumentation-http'

registerInstrumentations({
  instrumentations: [
    new HttpInstrumentation({
      requestHook: (span, request) => {
        span.setAttribute('custom.user_id', request.headers['user-id'])
      }
    })
  ]
})

每个 Remote Function 调用、每个路由加载、每个数据库查询——全部自动追踪和可测量。对于在生产环境中运行 Svelte 的团队来说，这将调试从猜测工作转变为数据驱动的调查。

开发者体验改进

Svelte CLI（sv）收到了专注于减少摩擦的重要更新：

• 简化的插件管理：sv add 现在智能处理 git 状态
• 更好的错误消息：编译器为常见错误提供可操作的建议
• 改进的 TypeScript 支持：属性和页面参数现在具有自动类型推断

小的生活质量改进累积成显著的生产力提升。例如，模板常量中新的 await 支持消除了笨拙的变通方法：

{#each items as item}
  {@const details = await fetchDetails(item.id)}
  <ItemCard {details} />
{/each}

性能和包体积改进

虽然不是头条功能，但夏季更新带来了可测量的性能提升：

• 更小的运行时：Runes 系统比以前的响应式模型产生更高效的代码
• 更好的 tree-shaking：未使用的 Runes 完全从包中消除
• 更快的水合：异步组件渐进式水合，改善感知性能

这些不是理论上的改进——生产应用程序报告包体积减少 15-30%，初始加载明显更快。

迁移考虑

对于现有的 Svelte 4 应用程序，迁移路径出人意料地平滑。编译器为已弃用的模式提供有用的警告，大多数代码继续正常工作。最大的调整涉及：

1. 将响应式声明转换为 Runes（提供自动化工具）
2. 更新数据获取模式以使用异步组件
3. 在适当的地方将 API 端点重构为 Remote Functions

Svelte 团队提供全面的迁移指南和 codemods 来自动化常见转换。

工具更新

生态系统改进的简要提及：

• Vite 7 支持：更快的构建和更好的 HMR
• Deno 兼容性：SvelteKit 应用程序现在可以在 Deno 中运行而无需修改
• 边缘运行时支持：改进了 Cloudflare Workers 和 Vercel Edge 的部署选项

结论

这些 2025 年夏季的 Svelte 5 更新不仅仅代表增量改进——它们是现代 Web 开发的连贯愿景。异步组件消除了整个类别的复杂性。Remote Functions 提供类型安全的全栈开发，无需仪式感。成熟的 Runes 系统提供可预测的响应式，从简单的计数器扩展到复杂的应用程序。

对于评估框架或计划迁移的团队来说，Svelte 5 的夏季发布提出了令人信服的理由。该框架已从一个有趣的替代方案发展为一个生产就绪的平台，优先考虑开发者体验和应用程序性能。

问题不在于这些功能是否令人印象深刻——它们显然是的。问题在于您的团队是否准备好拥抱一种更简单、更高效的 Web 应用程序构建方式。

常见问题

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.