Vue.js + Astro 比 Vue SPA 更好吗？

在这里插入图片描述

最近有很多开发者宣布他们已经将网站迁移到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 architecture

Islands架构，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>