社区编辑申请
注册/登录
Vue.js + Astro 比 Vue SPA 更好吗?
开发 项目管理
最近有很多开发者宣布他们已经将网站迁移到Astro。这通常伴随着一张接近完美的Lighthouse分数的截图和一系列火箭表情符号。

最近有很多开发者宣布他们已经将网站迁移到Astro。这通常伴随着一张接近完美的Lighthouse分数的截图和一系列火箭表情符号。

像大多数人一样,我发现无休止的新框架会让人感到厌倦。但我对Astro做了一些研究,认为它真的值得一试。

在本文中,我将向您展示如何使用 Astro 构建基于 Vue 的应用程序,我们将了解其独特的架构如何带来比单页应用程序 (SPA) 更好的性能。

SPA 架构回顾

在我们看到 Astro 的实际应用之前,我们需要了解它的架构。为此,让我们首先提醒自己单页应用架构的优缺点。

SPA 将网站的所有功能和内容抽象为 JavaScript 组件。这很棒,因为它使网站的开发变得容易。

这种方法的缺点是当网站投入生产时。所有这些JavaScript组件被捆绑在一起成为一个大的应用程序。由于体积太大,浏览器下载和运行的速度可能会很慢。

当然,你可以通过代码拆分来优化这个捆绑。但是,浏览器仍然会有一些前期成本必须支付,只是为了启动网站。

<!-- 典型的 SPA 页面 -->
<head>
<script src="/app.js"></script>
</head>
<body>
<!-- 在 app.js 加载之前,此页面没有有意义的内容 -->
<div id="app"></div>
</body>

Islands architectureIslands

架构,Astro使用的架构,也使用了组件。然而,与单页应用程序不同的是,这些组件并没有捆绑到一个 JavaScript 包中。

相反,每个组件都被视为一个独立的迷你应用程序,与所有其他组件隔离存在。

例如,如果您的页面有一个基于 JavaScript 的导航栏,那将是一个迷你应用程序。如果它还具有 JavaScript 驱动的图像轮播,那就是另一个迷你应用程序。等等。

但是,如果这些组件没有被捆绑,它们如何被包含在项目中?我将在下一节解释这个问题。

<!-- Islands architecture -->
<body>
<MyNavBar /> <!-- navbar mini app -->
<main>
<MyCarousel /> <!-- carousel mini app -->
<div class="content">
<!-- more page content... -->
</div>
</main>
</body>

服务器渲染的组件

Astro 主要是一个静态站点生成器。它适用于大多数支持服务器渲染组件的 UI 库,包括 Vue、Svelte、Preact、React 和 Lit。

因此,当Astro构建你的应用程序时,每个JavaScript组件都在服务器端加载,内容是”快照“。这个快照被添加到静态页面上。

服务器渲染不是 Astro 特有的功能,但在 SPA 中这是一个可选功能,而在 Astro 中,这是一个至关重要的功能,我们将在下面看到。

<!-- 开发内容 -->
<body>
<MyForm /> <!-- JS component -->
</body>

<!-- 快照内容 -->
<body>
<form> <!-- Server rendered JS component -->
<input type="text" >
<!-- ... -->
</form>
</body>

Progressive hydration

这就是Astro的神奇之处——通过islands架构、服务器渲染组件和渐进式水合的组合。

由于我们的页面被划分为服务器渲染的迷你应用程序,互动层(JS)可以独立加载,并且只在需要的时候加载。

例如,您可能有一个交互式表单。此表单位于页面下方,位于视口之外。

表单是服务器渲染的,所以我们在页面上看到它。但是,在用户将其滚动到视图中之前,不需要加载昂贵的 JavaScript。

这就是 Astro 中“渐进式水合作用”的含义——我们只在需要时加载 JavaScript。

建立一个 Vue + Astro 项目

现在理论已经讲完了,让我们来看看它的实际效果吧!

要开始创建 Astro 项目,我们将首先创建一个目录:

$ mkdir vue-astro

然后运行Astro 安装向导:

$ npm init astro

安装向导将允许我们选择“Vue”作为我们选择的框架。这将创建一个包含 Vue 组件的样板项目。

Astro组件

Astro 页面保存在 src/pages 目录中。在默认安装中,我们看到一个文件 index.astro,如下所示。

src/pages/index.astro

---
import VueCounter from '../components/VueCounter.vue';
let title = 'My Astro Site';
---
<html lang="en">
<head>
<!-- ... -->
<title>{title}</title>
</head>
<body>
<main>
<!-- ... -->
<VueCounter client:visible />
</main>
</body>
</html>

Astro 具有单文件组件样式,与 Vue 类似,但有一些重要区别。

首先,在文件的顶部,我们看到似乎是前端内容,即用 --- 划定的内容。这是在服务器端运行的JavaScript。这不会被发送到客户端。

在这里我们可以看到两件重要的事情:首先,我们正在导入一个Vue组件(你可以从任何支持的框架中导入组件)。另外,我们正在设置一个值:title。

这里声明的所有变量在模板中都是可用的。你会注意到 title 在模板中以类似JSX的语法进行插值。

src/pages/index.astro

---
...
let title = 'My Astro Site';
---
<html lang="en">
<head>
<!-- ... -->
<title>{title}</title>
</head>
<!-- ... -->

接下来,注意模板中声明的组件。

默认情况下,组件在客户端是不交互的,只是由Astro进行服务器渲染。

如果我们想让组件交互,即加载 JavaScript,我们需要给它一个指令告诉客户端何时加载它。

在这种情况下,client:visible 指令告诉 Astro 当组件在页面中可见时使 VueCounter交互。

如果发生这种情况,Astro 将从服务器请求该组件的 JS 并对其进行水合。

---
import VueCounter from '../components/VueCounter.vue';
...
---
<html lang="en">
<head><!-- ... --></head>
<body>
<main>
<!-- ... -->
<VueCounter client:visible />
</main>
</body>
</html>

加载Astro

现在让我们运行 Astro 的开发服务器来查看我们的项目。

npm run dev

在页面的源代码中,你会看到在文档中没有任何的JavaScript捆绑! 不过,我们确实看到了服务器渲染的Vue组件。

我们还看到 Astro 在文档正文的底部添加了一个脚本。在这里,它加载了一个模块来水合 Vue 组件。

该模块将下载 Vue 组件和依赖项(Vue 框架),而不会阻塞渲染。

index.html

<!-- Page source -->
<body>
<!-- server rendered component -->
<div id="vue" class="counter">
<button>-</button>
<pre>0</pre>
<button>+</button>
</div>

<!-- 添加的代码片段以水合 Vue 组件 -->
<script type="module">
import setup from '/_astro_frontend/hydrate/visible.js';
// ...
</script>

为什么 Vue + Astro 可能比 Vue SPA 更好

要了解为什么 Astro 在 UX 方面可以击败单页应用程序,让我们对网站加载时发生的情况进行简化分解。

  1. index.html已经加载。它没有JS捆绑,但它包括你的服务器渲染的组件,所以用户已经可以看到你的网站内容--只是还没有互动。
  2. 组件所需的任何JS现在将以一系列独立脚本的形式异步下载。
  3. 下载这些脚本后,它们将被解析并运行。现在可以进行交互了。

现在让我们想象一下,我们把这个网站重新建成一个单页的应用程序。它现在会如何加载?

  1. index.html被加载。由于该页面不包含任何内容,用户无法看到任何东西。浏览器将开始下载捆绑程序。
  2. 下载 JS 包后,浏览器就会对其进行解析。用户仍然看不到任何东西。
  3. 一旦 JS 包被解析并运行,页面内容就生成了。用户现在可以查看应用程序并与之交互。

简单的说:Astro 网站几乎可以立即提供可见的内容,不像 SPA 需要先下载并运行 JS 包。

(Astro应用也会稍早提供互动性,因为它可能不需要下载那么多JS,因为没有SPA外壳、路由器等)

最后的想法

Astro 的架构可能是比单页应用程序更好的选择,因为它无需 JavaScript 即可使内容可见,并且仅在需要时加载 JS。

从理论上讲,单页应用程序可以通过预渲染和代码拆分的组合来实现类似的效果。不同之处在于,Astro 网站默认以这种方式进行优化,因为您需要选择加入交互性和 JS。

当然,并不是每个应用程序都会从一这种架构中受益,因为 SPA 更适合某些类型的应用程序,例如高度动态和交互式的应用程序。所以我们不会期望 SPA 架构会消失。

原文:https://vuejsdevelopers.com/2021/10/26/vue-astro/

作者:Anthony Gore


责任编辑:武晓燕 来源: 前端全栈开发者
相关推荐

2022-04-04 16:53:56

2022-04-01 10:41:09

Vue.js开发工具

2022-05-16 10:36:08

GitHub开源项目

2022-03-07 11:15:25

Pinia状态库vue3

2022-03-10 11:04:04

Vue3Canvas前端

2022-04-13 11:24:18

ETS开发HarmonyOS鸿蒙

2022-02-16 08:45:55

Vue-Router权限管理系统权限验证

2022-03-10 09:00:37

2020-10-25 18:43:20

VueTypeScript前端

2022-05-23 08:59:02

piniavue插件

2022-04-08 08:11:44

自定义钩子Vuejs

2022-05-03 21:18:38

2022-05-17 08:39:05

VueViteTypeScript

2022-04-18 08:09:44

渲染器DOM挂载Vue.js

2009-09-10 09:11:52

思科CCNP认证介绍教材资料

2022-05-09 11:19:12

CSS函数开源

2022-04-01 08:08:27

Vue.js框架命令式

2022-05-23 13:50:20

开发封装

2022-05-20 15:27:41

React工具Vue

2022-04-20 09:07:04

同话题下的热门内容

2022 了,你还不知道 Multi-repo 和 Mono-repo 的区别么?我们一起聊聊 API 安全玩转 Image 篇,推荐十个你没见过的图片处理神器项目,YYDS!

编辑推荐

从人肉运维到智能运维,京东金融服务监控的进阶之路阿里10年分布式数据库技术沉淀,AliSQL X-Cluster的应用实战爱奇艺CTO汤兴:道天地将法,《孙子兵法》的管理之道强一致、高可用、自动容灾能力背后,阿里X-Paxos的应用实践猫眼电影李明辉:机器学习在票房预估中的实战
我收藏的内容
点赞
收藏

51CTO技术栈公众号