Svelte 是一個元件框架，而 SvelteKit 則是一個應用程式框架（或「後設框架」，取決於你問誰），它解決了建構生產就緒應用程式的棘手問題

• 路由
• 伺服器端渲染
• 資料擷取
• 服務工作者
• TypeScript 整合
• 預先渲染
• 單頁應用程式
• 程式庫封裝
• 最佳化的生產建置
• 部署到不同的託管供應商
• ...等等

SvelteKit 應用程式預設會進行伺服器端渲染（類似傳統的「多頁應用程式」或 MPA），以獲得出色的首次載入效能和 SEO 特性，但之後可以轉換為用戶端導航（類似現代的「單頁應用程式」或 SPA），以避免在使用者導航時笨拙地重新載入所有內容（包括第三方分析程式碼之類的東西）。它們可以在任何執行 JavaScript 的地方執行，儘管如我們將看到的，您的使用者可能根本不需要執行任何 JavaScript。

如果這聽起來很複雜，請別擔心：SvelteKit 是一個會與你一同成長的框架！從簡單開始，並在您需要時加入新功能。

專案結構

在右邊的檔案樹狀檢視器中，您會看到一些 SvelteKit 期望在專案中找到的檔案。

如果您之前使用過 Node.js，就會對 package.json 很熟悉。它列出了專案的相依性（包括 svelte 和 @sveltejs/kit）以及與 SvelteKit CLI 互動的各種 scripts。（我們目前在底部視窗中執行 npm run dev。）

請注意，它也指定了 "type": "module"，這表示 .js 檔案預設會被視為原生 JavaScript 模組，而不是舊版的 CommonJS 格式。

svelte.config.js 包含您的專案設定。我們目前不需要擔心這個檔案，但如果您好奇，請造訪文件。

vite.config.js 包含 Vite 設定。因為 SvelteKit 使用 Vite，所以您可以使用 Vite 功能，例如熱模組替換、TypeScript 支援、靜態資產處理等等。

src 是您應用程式原始碼所在的位置。src/app.html 是您的頁面範本（SvelteKit 會適當地取代 %sveltekit.head% 和 %sveltekit.body%），而 src/routes 則定義了應用程式的路由。

最後，static 包含任何在部署應用程式時應包含的資產（例如 favicon.png 或 robots.txt）。