Svelte 和 SvelteKit 静态适配器之间的区别？

Question

我这里有两个项目：

1. 使用

   npm create vite app-with-svelte -- -t svelte-ts

创建
2. 使用

   npm create svelte app-with-sveltekit

   创建（骨架项目）

然后，我按照此文档使用静态适配器。最后，

svelte.config.js

：

 import adapter from "@sveltejs/adapter-static";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

 const config = {
     preprocess: vitePreprocess(),
     kit: {
         adapter: adapter({
         pages: "build",
         assets: "build",
         fallback: undefined,
         precompress: false,
         strict: true,
         }),
     },
 };

 export default config;

src/routes/+layout.ts

：

export const prerender = true;

这两个项目都旨在作为静态文件托管。其中任何一个比另一个更好吗？

我使用 SvelteKit 静态适配器和 Neutralino 创建了一个项目。从中间开始，我陷入了与 SvelteKit 的兼容性（Neutralino 问题），迫使我使用 Svelte。所以我搜索了将 SvelteKit 迁移到 Svelte，发现了一条 reddit tweet:

无需迁移套件。向上看

@sveltejs/adapter-static

。应该能解决你的问题

npm run build

之后，Svelte和SvelteKit静态适配器相同吗？如果是这样，我应该使用哪一个？

Answer 1

它们不一样。 最需要注意的是，Sveltekit 可以路由页面，而 Vite + Svelte 项目没有路由功能，因为 Svelte 没有内置路由器。

Answer 2

如果您只是在 Vite 中使用 Svelte，那么您将创建一个纯单页应用程序，其中该应用程序由 HTML、CSS 和 JS 组成，所有这些都在用户的 Web 浏览器中运行。也就是说，您的用户必须在其 Web 浏览器中启用客户端 JS，以便他们能够看到任何内容。这不是最佳的。而且，用户浏览的第一个页面加载速度会很慢（需要运行很多客户端JS代码...），搜索引擎不会太喜欢你的网站。

如果您使用 SvelteKit，那么您可以使用各种适配器来实现更强大的应用程序，例如利用预渲染、服务器端渲染、服务器端代码（即具有后端）等。

SvelteKit 中最简单的适配器类型是

adapter-static

。使用它，您基本上可以构建一个单页应用程序，但在构建时，SvelteKit 会预渲染您的所有页面，并将它们作为静态 HTML 文件提供（这些文件独立于 Svelte 和客户端 JS），因此您的网站将适合没有启用客户端 JS 的用户，首页加载速度非常快，搜索引擎会喜欢你的网站。启用了客户端 JS 的用户也将利用 Hydration，即 SvelteKit 将您的应用程序转变为这些用户的纯单页应用程序，以便这些用户可以享受单页应用程序的好处。