![](\"https://inews.gtimg.com/om_bt/OZCqLYnlTSOmG5u-b4sldNnA1w2eB7ZhNM2SMhSU6SfYsAA/641\")
这就是在 SvelteKit 中安装 Tailwind CSS 的完整过程。与 Astro 中的相应步骤相比较，就能看出二者在工作流程方面的差异。
使用 SvelteKit 创建 Svelte 组件
在整合 Svelte 组件方面，SvelteKit 有着独特的简化优势——因为在本质上，它就是一套基于 Svelte 的框架。
例如，我们可以在 SvelteKit 应用程序当中轻松复制和重用 UserCard 组件。我们可以直接将该组件导入至任何页面，例如.page.svelte，且无需任何额外配置。
通过在 SvelteKit 中轻松重建 UserCard 示例的过程，也能看出 SvelteKit 与 Svelte 之间具有天然的兼容性优势。
孰优孰劣：
Astro + Svelte 对阵 SvelteKit
到这里，我们已经探索了 Astro + Svelte 和 SvelteKit 的初始设置步骤。接下来，让我们开展深入比较，根据这些框架的独特属性分析它们的优势和局限性。
构建和性能
单纯用基础配置文件并不足以全面体现这些框架的性能水平，因为其行为在更复杂的应用场景下往往会出现巨大差异。
为了突破这个限制，这里创建一款博客应用，可展示来自 JSONPlaceholder API 的博文内容。这款应用程序在 Astro + Svelte 和 SvelteKit 上均采用服务器端渲染（SSR）。
可以看到，Astro + Svelte 组合在 Lighthouse 中的得分如下：
而 SvelteKit 的 Lighthouse 得分如下：
分析上述结果，两种框架明显都带来了令人满意的性能表现。进一步观察，可以看到 Astro + Svelte 组合的性能指标如下：
首次内容绘制（FCP）：1.4 秒
最大内容绘制（LCP）：1.4 秒
总阻塞时间：0 毫秒
累积布局偏移：0
而 SvelteKit 的性能指标则整理如下：
首次内容绘制（FCP）：0.9 秒
最大内容绘制（LCP）：0.9 秒
总阻塞时间：40 毫秒
累积布局偏移：0
这些数字表明，SvelteKit 在首次内容绘制和最大内容绘制时间方面略优于 Astro + Svelte，但后者的优势是总阻塞时间为 0，可提供更加流畅的交互体验。
此外，Astro + Svelte 组合在移动和桌面平台上的表现更趋一致，而 SvelteKit 则差异较大。
路由机制
Astro 是一套多页应用框架，而 SvelteKit 则属于单页应用框架，因此二者的适用范围也有所区别。尽管如此，我们还是具体比较二者的路由与页面渲染机制，供大家参考。
Astro 和 SvelteKit 都使用基于文件的路由机制。但在使用 Astro + Svelte 组合时，整个过程涉及创建不同的 Svelte 组件，这些组件随后会被导入至 Astro 页面当中。
此外，如果你的 Svelte 组件使用客户端 JS，Astro 会通过其客户端指令强制规定水合行为的规范。这种细粒度操作可以更好地控制 Astro 内的水合过程。
这两套框架也都提供服务器端渲染（SSR）功能。但在涉及静态生成路由（SSG）时，Astro 会使用 getStaticPaths() 方法，从而获得显著的简单性优势。
例如，以下动态路由将根据从 JSONPlaceholder API 检索到的每篇博文生成静态 HTML 页面：
---// src/pages/blog/[id].astroexport async function getStaticPaths() { const data = await fetch(\"https://jsonplaceholder.typicode.com/posts\").then( (response) => response.json() ); return data.map((post) => { return { params: { id: post.id }, props: { post }, }; });}const { id } = Astro.params;const { post } = Astro.props;---{post.title}
{post.body}
另一方面，SvelteKit 则需要将 SSG 适配器同补充配置结合起来，才能实现类似的功能。
再有，SvelteKit 路由页面只能处理.svelte 文件，而 Astro 路由无需额外配置即可支持.md、.mdx 和 .html 文件。
数据获取
两套框架都提供在路由页面之内获取数据的不同方法。Astro 可以直接访问页面文件之内的路由信息以实现数据获取。相比之下，SvelteKit 则引入一种分离度更高的方法：
虽然 Astro 也能实现类似的分离度，但 SvelteKit 在设计上对这种关注点分离做出了明确强调。
而在将 Astro 与 Svelte 相结合时，从 Svelte 组件处获取数据、再将组件导入 Astro 页面，可能会导致部分水合。
开发者体验
Astro 的开发者体验更具优势，原因是其简化了第三方库的集成过程。大家可以用 astro add 命令通过单行安装程序轻松完成库集成。
之前，我们在向应用程序中添加 Svelte 和 Tailwind 时已经体验过这样的简单过程。其不仅支持各类软件包，还允许大家创建自定义集成。相比之下，SvelteKit 则缺乏类似的功能。
Astro 还引入了 TypeScript 支持和无缝 Markdown 渲染，进一步增强了开发体验。而在使用 SvelteKit 时，这些功能通常都需要额外进行配置。
但 Astro 也绝非完全无瑕，一大缺点是如果 Astro + Svelte 中存在不正确的客户端指令规范，则可能导致部分水合和意外的应用行为。
比较表: Astro + Svelte 对阵 SvelteKit
以下比较表突出展示了 Astro + Svelte 和 SvelteKit 之间的相似点和差异。
如果你正在为下一个项目是选择 SvelteKit、还是 Astro + Svelte 组合感到困扰，希望本文的评估和比较能带来一点启发。
总结
在本文中，我们探索了 Astro + Svelte 和 SvelteKit 两套方案，深入研究了它们的各自启动过程和独有特性。
如大家所见，到底选择 Astro + Svelte 还是 SvelteKit，仍然要由您的实际需求和个人喜好而定。
如果你的项目强调以内容为中心（例如博客或类似用例），那么 Astro + Svelte 无疑是相对理想的选择。另一方面，如果您希望打造一款高度依赖客户端 JS 进行复杂交互的高性能应用程序，那么 SvelteKit 的优势将得以凸显。具体如何，还请大家酌情考量。
https://blog.logrocket.com/exploring-astro-svelte-vs-sveltekit/
收官之战！2023 年最后一场会议——QCon 全球软件开发大会·上海站，将于 12 月 28-29 日在上海·中优城市万豪酒店举办。
此次大会策划了 GenAI 和通用大模型应用探索、AI Agent 与行业融合应用的前景、LLM 时代的性能优化、智能化信创软件 IDE、LLM 时代的大前端技术、高性能网关设计、面向人工智能时代的架构、构建本土编程语言生态的实践、性能工程：提升效率和创新的新方法、LLM 推理加速和大规模服务、现代数据架构演进、建设弹性组织的经验传递、SaaS 云服务弹性架构设计、大模型研究进展与产业应用展望等专题。