部署 Svelte 应用
用 Vite 将 Svelte 组件编译为原生 JS，部署最小静态包到任何主机。
平台入门
为什么
Svelte 编译消除框架运行时，包比 React/Vue 小 10-50%。无虚拟 DOM 和最小运行时意味着慢设备加载更快、带宽成本更低。
平台即服务采用率 2024 年增长 24%，团队从虚拟机管理转向 git push 部署。the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research)，PaaS 层捕获了大多数新工作负载。
何时使用
性能关键 SPA、嵌入式小部件和低带宽受众选 Svelte。需要路由、SSR 或适配器时用 SvelteKit。
如何做
1. 构建 — npm run build 输出 dist/ 含 index.html + 打包 JS/CSS
2. SPA 回退 — svelte-spa-router 默认用哈希路由（无需服务器配置）
3. 部署 — 上传 dist/ 到任何静态主机
4. Vite 配置 — 自定义 base、target、minify
5. 环境变量 — import.meta.env.VITE_* 构建时
6. 无 SSR — SSR 用 SvelteKit 配相应适配器
示例
// vite.config.ts
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
export default defineConfig({
plugins: [svelte()],
build: { target: "es2020", minify: "esbuild" },
});
// App.svelte — 组件编译为原生 JS
<script>
let count = 0;
</script>
<button on:click={() => count++}>{count}</button>
// package.json
{ "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" } }
// 部署：npm run build && npx wrangler pages deploy dist
常见问题
- ⚠用 Svelte 路由而无 SvelteKit — 无 SSR、无文件路由，仅限 SPA
- ⚠旧浏览器构建失败 — target 太高（es2022），降到 es2017 兼容
- ⚠CSS 未提取 — Vite 默认内联样式，大应用配置 build.cssCodeSplit
最佳实践
- ✓单页小部件以外的任何场景用 SvelteKit — 处理路由、SSR 和适配器
- ✓启用 vite-plugin-svelte 预处理 TypeScript 和 SCSS 提升开发体验
- ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求