【ArchSummit 】国内外100+顶尖专家齐聚 ,AI、云原生、数智化全面囊括! 了解详情
写点什么

Astro + Svelte 对阵 SvelteKit:优劣详解

作者 | Elijah Asaolu

  • 2023-12-06
    北京
  • 本文字数:5367 字

    阅读完需:约 18 分钟

Astro + Svelte对阵SvelteKit:优劣详解

Astro 这套 Web 框架虽然相对年轻,但在开发领域已经获得了巨大关注。随着市场人气的激增,不少开发者正在考试从 SvelteKit 和 Nuxt 等传统框架处迁移至 Astro 阵营。


在本文中,我们将深入探讨 Astro + Svelte 与 SvelteKit 之间的优劣,比较二者的性能表现、开发者体验和相关功能。


在文章末尾,我们将整理出一份比较表格,帮助大家在后续 Svelte 项目中更有针对性地挑选框架。


Astro 是什么?


Astro 允许大家使用自己喜爱的 UI 组件和库构建起快速且现代的网站。这是一套 UI 中立型框架,能够兼容 React、Svelte、Vue、Solid 等现代 JS 框架。大家甚至可以将多个 JS 框架整合到同一套代码库当中。


有了 Astro,我们可以从各种来源处获取内容,并将其部署到不同的平台之上。它快速、无 JS 的前端架构非常适合构建多页应用,同时对 SEO 和性能做出优化。


默认情况下,Astro 就是一套无 JS 框架,能够将应用程序逻辑转换成 HTML 并在服务器端执行渲染。当然,它的“组件岛”功能也支持创建并导入在客户端执行的 JS 交互式组件。


Astro 还同时支持 Markdown 与 MDX,使其成为创建富内容网站和博客的理想选项。


SvelteKit 是什么?


SvelteKit 是一套 Web 开发框架,大家可以使用 Svelte 创建起灵活快速的 Web 应用程序。它将预渲染页面与动态服务器端沉浸相结合,以更灵活的方式实现最佳性能。


此外,SvelteKit 还能将应用程序转换为渐进式 Web 应用(PWA),并支持将开发成果导出为静态站点。


SvelteKit 的定位类似于 Next.js 加 React、Nuxt 加 Vue,能够提供路由、数据获取、可访问性、SEO 优化等基础功能。


Astro + Svelte 上手指南


要将 Svelte 引入 Astro 应用程序,第一步就是创建新的 Astro 应用:


npm create astro@latest
复制代码


接下来,命令会要求提供应用名称和首选启动模板等细节信息。大家可以选择“Empty”项目模板并根据要求设定其他配置。在完成之后,使用以下命令启动你的应用:


npm run dev
复制代码


要将 Svelte 添加进 Astro 应用,请执行以下命令:


npx astro add svelte# 或者yarn astro add svelte
复制代码


此命令将安装必要的软件包,并申请修改基础文件权限。接受更改后,Svelte 就会无缝集成至您的 Astro 应用程序当中。


将 Svelte 适配器添加至 Astro 应用程序之后,我们可以在默认 src/components 目录中的.svelte 文件内创建 Svelte 组件,并将其导入自己的应用程序当中。


在 Astro 中安装 Tailwind CSS


Astro 用单行安装程序简化了第三方软件包的安装过程,操作与之前添加 Svelte 的方式一样。运行以下命令,即可安装 Tailwind CSS:


npx astro add svelte# ORyarn astro add svelte
复制代码


执行此命令之后,我们会收到授权修改特定文件并安装所需软件包的提示。完成步骤之后,只需重新启动应用程序,Tailwind 即可开始无缝运行。


如果大家需要实践指引,也可以查看 Astro 发布的 Tailwind 手动安装说明:https://docs.astro.build/en/guides/integrations-guide/tailwind/#manual-install


使用 Svelte + Astro 创建组件


下面,我们尝试一下 Astro + Svelte 这个组合。在默认的 src/components 文件夹中创建一个新的 UserCard.svelte 文件,并将以下代码粘贴进去:


<script>    import { onMount } from 'svelte';    let user = null;    onMount(async () => {        try {            const response = await fetch('https://randomuser.me/api/');            const data = await response.json();            user = data.results[0];        } catch (error) {            console.error('Error fetching user:', error);        }    });</script><div class="flex items-center justify-center h-screen">    {#if user}        <div class="bg-white rounded-lg shadow-md p-6 w-80">            <img src={user.picture.large} alt="User" class="w-25 h-25 rounded-full mx-auto mb-4" />            <h2 class="text-xl font-semibold mb-2">                {user.name.first}                {user.name.last}            </h2>            <p class="text-gray-600">{user.email}</p>            <p class="text-gray-600 mt-1">                {user.location.street.number}                {user.location.street.name}            </p>            <p class="text-gray-600">                {user.location.city}, {user.location.country}            </p>        </div>    {:else}        <p>Loading...</p>    {/if}</div>
复制代码


以上代码会从 Random User AIP 处检索数据。安装组件之后,它会展示 Tailwind 风格的配置卡。进入默认的 pages/index.astro 文件并用以下代码替换掉原有内容:


---import Layout from "../layouts/Layout.astro";import UserCard from "../components/UserCard.svelte";---<Layout title="Welcome to Astro.">  <UserCard client:load /></Layout>
复制代码


在这里,我们更新了应用的 index 页面,以导入和渲染之前创建好的 UserCard Svelte 组件。此外,我们还向 UserCard 组件中添加了 client:load 属性,借此展示如何使用 Astro 组件岛。下面,我们会具体解析示例中的各 Astro“岛”。


我们的 Svelte 组件会在挂载之后获取数据,这就要求在客户端上执行 JS。这明显跟 Astro 以 HTML 渲染为中心、不依赖 JS 的默认设置有所区别。


为了弥合这一差异并向 Astro 表明该组件的交互式属性,我们需要在 UserCard 组件中引入 client:load 属性。如此一来,页面加载时会立即加载并水合组件 JS,确保组件行为符合预期。


一切就绪之后,在网络浏览器中运行我们的应用程序,这时应该会看到类似下图的输出示例:



SvelteKit 上手指南


要创建新的 SvelteKit 应用程序,请运行以下命令:


npm create svelte@latest new-appcd my-appnpm install
复制代码


在成功创建应用程序之后,使用以下命令将其启动:


npm run dev
复制代码


在 SvelteKit 中安装 Tailwind CSS


在 SvelteKit 中安装 Tailwind CSS 的过程,与在其他传统框架中安装非常相似。整个过程涉及一系列命令,下面我们分步来看。


首先,在项目目录中运行以下命令以安装 Tailwind CSS 及其依赖项。此步骤还会生成必要的 tailwind.config.js 和 postcss.config.js 文件。


npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p
复制代码


接下来,打开 svelte.config.js 文件并将内容替换为以下代码,旨在从 @sveltejs/kit/vite 处导入 vitePreprocess。这样,我们就能将 <style>块作为 PostCSS 进行处理:


import adapter from '@sveltejs/adapter-auto';import { vitePreprocess } from '@sveltejs/kit/vite';const config = {  kit: {    adapter: adapter()  },  preprocess: vitePreprocess()};export default config;
复制代码


更新 content 部分以确保 tailwind.config.js 文件匹配以下示例,其中包含所有模板文件的路径:


content: ['./src/**/*.{html,js,svelte,ts}'],
复制代码


创建一个新的 ./src/app.css 文件,并向每个 Tailwind 层嵌入 @tailwind 指令:


@tailwind base;@tailwind components;@tailwind utilities;
复制代码


最后,在./src/routes/+layout.svelte 处创建一个新的布局文件,并在其中导入刚刚创建的 app.css 文件:


<script>    import '../app.css';</script><slot />
复制代码


这就是在 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;---<h1>{post.title}</h1><p>{post.body}</p>
复制代码


另一方面,SvelteKit 则需要将 SSG 适配器同补充配置结合起来,才能实现类似的功能。


再有,SvelteKit 路由页面只能处理.svelte 文件,而 Astro 路由无需额外配置即可支持.md、.mdx 和 .html 文件。


数据获取


两套框架都提供在路由页面之内获取数据的不同方法。Astro 可以直接访问页面文件之内的路由信息以实现数据获取。相比之下,SvelteKit 则引入一种分离度更高的方法:


.└── sample-page    ├── +page.js OR +page.server.js    └── +page.svelte
复制代码


如上所述,我们可以在 SvelteKit 中访问路由信息、执行数据获取,并在 +page.js 或者 +page.server.js 文件中导出所需数据。之后,即可访问相应 +page.svelte 文件中导出的数据。


虽然 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/


相关阅读

Astro 低代码平台关键能力技术浅析

使用 Astro 如何构建 Astrobot Voice

创建Svelte Web组件

用 Svelte 实现响应式、反应式的动画数据可视化

2023-12-06 14:307663

评论 1 条评论

发布
用户头像
“SvelteKit则属于单页应用框架”?
2023-12-09 15:34 · 云南
回复
没有更多了
发现更多内容

后起之秀优咔科技,助力自动驾驶快速落地

编程猫

蓝易云:Ubuntu Linux 系统上怎么使用 SNAP 安装 Docker?

百度搜索:蓝易云

Docker Linux ubuntu 运维 SNAP

蓝易云:多个端口怎么运行SSH服务器?

百度搜索:蓝易云

云计算 Linux 运维 SSH 云服务器

为什么企业需要私有化专属大模型

Baihai IDP

程序员 AI 大模型 生成式AI 白海科技

未来十年,AIGC将彻底颠覆内容生产行业

禅道项目管理

人工智能 项目管理 AIGC

用友参编的《上市公司数字经济发展报告(2023)》正式出版

用友BIP

数字经济

强大的鼠标增强软件 BetterMouse for Mac中文

mac大玩家j

Mac软件 鼠标管理 鼠标工具

科技创新闪耀柏林 IFA,2023全球产品技术创新大奖榜单揭晓

科技热闻

钱包app软件开发、多链多签名钱包

西安链酷科技

钱包系统开发 NFT链游 多签钱包

Spring Boot整合Minio实现上传凭证、分片上传、秒传和断点续传

java易二三

Java 编程 程序员 Spring Boot 计算机

mac电脑系统活动监控器 iStat Menus激活中文+密钥码

胖墩儿不胖y

系统监控 Mac软件 系统监控软件

DBeaverUltimate 最新旗舰激活中文版 v23.2.0

胖墩儿不胖y

数据库管理 管理数据库 数据库工具

LaunchBar for Mac(程序快速启动工具) v6.18.1中文激活版

mac

苹果mac Windows软件 快速启动工具 LaunchBar

区块链、智能ai量化现货合约现货量化机器人开发公司

西安链酷科技

合约跟单 合约量化 智能量化交易软件

后端工程师求职实录:二线城市就业攻略与心得分享

王中阳Go

golang 面试题 求职 找工作 `后端

加密数字货币合约交易所、java、php源码交付

西安链酷科技

交易所开发 交易所 交易所搭建

性能问题分析排查的实践方法

老张

方法论 性能测试

质押挖矿、算力挖矿持币生息流动性挖矿产品定制、usdt理财产品开发

西安链酷科技

区块链 TRONex波场智能合约 DAPP智能合约交易系统开发

今日头条极速版升级头条搜索极速版,更智能、更丰富、更极速

科技热闻

一文教会你连接水晶头

小齐写代码

小灯塔系列-中小企业数字化转型系列研究——音视频服务测评报告

向量智库

2024上海国际物联网展览会(IoT展)

AIOTE智博会

物联网展览会 物联网博览会 物联网展

高并发系统设计之负载均衡

Java随想录

Java 并发

平台工程动态 Monthly News 2023-8

杨振涛

软件工程 研发效能 平台工程 开发者体验 内部开发者平台

改革企业治理结构,建立国有企业全面预算管理制度

智达方通

国有企业 智达方通 全面预算管理 预算管理信息化

在 Go 中如何编写测试代码内容补充

江湖十年

golang 后端 单元测试

SQL 查询的执行顺序

emanjusaka

MySQL 数据库 sql 后端

火山引擎DataLeap数据血缘技术建设实践

字节跳动数据平台

大数据 数据治理 数据安全 数据研发 企业号9月PK榜

直播平台源码开发搭建APP的DASH协议:流媒体技术其中一环

山东布谷科技

软件开发 直播平台源码 流媒体技术 DASH 动态自适应流媒体

Astro + Svelte对阵SvelteKit:优劣详解_架构/框架_InfoQ精选文章