我这里有两个项目:
npm create vite app-with-svelte -- -t svelte-ts
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静态适配器相同吗?如果是这样,我应该使用哪一个?
它们不一样。 最需要注意的是,Sveltekit 可以路由页面,而 Vite + Svelte 项目没有路由功能,因为 Svelte 没有内置路由器。
如果您只是在 Vite 中使用 Svelte,那么您将创建一个纯单页应用程序,其中该应用程序由 HTML、CSS 和 JS 组成,所有这些都在用户的 Web 浏览器中运行。也就是说,您的用户必须在其 Web 浏览器中启用客户端 JS,以便他们能够看到任何内容。这不是最佳的。而且,用户浏览的第一个页面加载速度会很慢(需要运行很多客户端JS代码...),搜索引擎不会太喜欢你的网站。
如果您使用 SvelteKit,那么您可以使用各种适配器来实现更强大的应用程序,例如利用预渲染、服务器端渲染、服务器端代码(即具有后端)等。
SvelteKit 中最简单的适配器类型是
adapter-static
。使用它,您基本上可以构建一个单页应用程序,但在构建时,SvelteKit 会预渲染您的所有页面,并将它们作为静态 HTML 文件提供(这些文件独立于 Svelte 和客户端 JS),因此您的网站将适合没有启用客户端 JS 的用户,首页加载速度非常快,搜索引擎会喜欢你的网站。启用了客户端 JS 的用户也将利用 Hydration,即 SvelteKit 将您的应用程序转变为这些用户的纯单页应用程序,以便这些用户可以享受单页应用程序的好处。