---
title: SvelteKit 入门：为什么它比你想象的更简单
published: 2026-05-30
description: SvelteKit 是一个全栈 Svelte 框架，这篇文章带你了解它的核心概念和优势。
image: /posts/sveltekit-intro/img/cover.jpg
tags: ['SvelteKit', '前端框架']
draft: false
---

## 什么是 SvelteKit？

SvelteKit 是 Svelte 的官方全栈框架，类似于 React 之于 Next.js 的关系。它提供了路由、SSR、SSG 等能力，让开发者可以快速构建现代 Web 应用。

![SvelteKit Logo](https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg)

## 核心特点

### 1. 编译时框架

Svelte 和 React/Vue 最大的区别在于：**它在编译阶段就把组件转成原生 JS**，运行时没有虚拟 DOM。

```typescript
// Svelte 组件（编译后变成直接的 DOM 操作）
let count = 0
function increment() {
  count += 1
}
```

### 2. 文件路由

`src/routes/` 目录结构即 URL，不需要手动配置路由表：

```
src/routes/
├── +page.svelte        → /
├── about/
│   └── +page.svelte    → /about
└── posts/
    ├── +page.svelte    → /posts
    └── [slug]/
        └── +page.svelte → /posts/:slug
```

### 3. 全栈能力

SvelteKit 内置了服务端渲染（SSR）、静态站点生成（SSG）、API 路由等功能，开箱即用。

## 和其他框架对比

| 特性 | SvelteKit | Next.js | Nuxt |
|------|-----------|---------|------|
| 学习曲线 | 低 | 中 | 中 |
| 包体积 | 小 | 大 | 中 |
| 运行时开销 | 无 | 有 | 有 |
| 生态 | 小 | 大 | 大 |

## 总结

如果你追求**简洁的代码**和**极致的性能**，SvelteKit 是一个非常值得尝试的选择。它的学习曲线平缓，写起来就像在写原生 HTML/CSS/JS。

![Svelte 编译过程](https://svelte.dev/svelte-logo-horizontal.svg)