Astro的介绍。聪明的JavaScript懒惰加载

软件架构师，InfoWorld

思想库

Astro是应对当前JavaScript热潮的一种新方法：从反应式前端中获取更多性能。它是由创建Snowpack构建工具的同一个团队开发的。

已经有一些人试图通过避免昂贵的预取和引导来提高性能，这已经困扰了类似React的框架。这就是这里描述的臭名昭著的水化问题。

Astro采用了一种有趣而新颖的方法。它是一个构建系统，可以让你使用任何你想要的框架（React、Svelte、Vue等），然后找到最适合使用懒惰加载的地方。你可以把它看作是一种智能代码拆分，在捆绑时应用于你的应用程序。

因此，你可以使用你现在使用的同样熟悉的框架，但也可以获得潜在的巨大性能优势。

岛屿架构

Astro提出的网络架构有时被称为岛屿架构。其核心思想是，这些岛屿是你的交互式的、依赖JavaScript的组件，被纯HTML/CSS标记所包围。

通过以这种方式分割应用程序，你可以将所有的HTML直接运送到浏览器，这样用户就有了可以互动的东西，而依赖JavaScript的部分则可以在需要时才加载。你甚至可以告诉Astro推迟JavaScript，直到一个组件对用户可见，正如你将在下面看到的。

让我们通过使用在线沙盒开始熟悉Astro。点击这里来打开它。

这个URL将显示一个简单的页面，名为Page.astro，有一个时间戳。注意这个页面（清单1）是如何被分成两部分的。第一部分，由第一个破折号(---)表示，包含在构建时将在服务器上执行的代码，而不是在运行时。第二部分，由第二个破折号表示，包含将在运行时交付的标记。

---

注意{builtAtFormatter} 是如何在标记中引用构建时变量的。

现在让我们添加一个组件。点击顶部文件栏中的加号图标，如图1所示。

IDG

你的新组件将收到一个默认的名字（Component1.astro）和内容，如清单2所示。

---

这里我们又有了一个简单的变量赋值和显示。让我们在主页面中使用该组件。

返回到Page.astro。注意到系统已经很有帮助地在JavaScript段中插入了一个导入。

 import Component from '@/Component.astro';

你可以通过在标记中插入<Component /> ，来利用这个组件。这样做，你会在预览窗口中看到子组件的输出。

Astro的强大之处在于它对各种其他框架的支持。它通过在构建过程中使用它们的渲染引擎，并将它们编译成组件 "岛 "来实现。让我们来看看这是如何工作的。

如果你打开这个链接，你会看到一个运行Svelte组件的Astro应用程序。(这里是一个演示几个渲染引擎的例子）。

在上面链接的Svelte演示中，首先要注意的是astro.config.mjs文件。这个文件的内容看起来就像清单3。

export default /** @type {import('astro').AstroUserConfig} */ ({

清单3向你展示了如何启用Svelte，以便引擎能够理解Svelte组件。现在我们可以将Svelte文件直接导入到Astro文件中。例如，让我们在/pages/index.astro中添加这一行。

import Counter from '../components/Counter.svelte

现在我们可以在Astro中使用Svelte的计数器，如清单4所示。

<Counter client:visible>

虽然这是典型的Svelte用法，但请注意计数器上有一个Astro特有的属性：client:visible 。这意味着该组件将不会被加载到客户端，除非它在页面上是可见的。因此，它以最小的代价实现了一些细化的懒惰加载。

在撰写本文时，Astro支持Svelte、React、Vue、Solid、Preact和Lit。使用它们的过程就像使用Svelte一样。事实上，你可以启用多个渲染引擎，并在你的Astro应用中并排使用它们。

除了整合之外，Astro还提供了几个主题和启动器。

你已经看到了client:visible 指令的作用。还有其他可用的。在每一种情况下，指令首先告诉Astro在客户端渲染组件及其附带的JavaScript，而不是做服务器渲染和发送HTML。然后，它告诉Astro如何对该组件进行水化。可用的客户端指令有：

</p

Astro的客户端指令控制组件在页面上的水化方式。

`<MyComponent client:load />` : Hydrates the component on page load.
<MyComponent client:idle />:一旦主线程空闲，就给组件注水（使用）。requestIdleCallback()
<MyComponent client:visible />: 当元素进入视口时，组件就会被水化（使用）。对页面下方的内容有用。IntersectionObserver
<MyComponent client:media={QUERY} />: 当浏览器与给定的媒体查询相匹配时，组件就会被水化(使用 )。适用于侧边栏的切换，或其他应该只在移动或桌面设备上显示的元素。matchMedia
<MyComponent client:only={string} /> 水合：在页面加载时水合该组件，只在客户端渲染。以字符串的形式获取组件的框架（例如：）。"svelte"

因为Astro从根本上说是一个构建工具，它可以完全控制最终运送到用户浏览器的内容。这意味着除了对懒惰的JavaScript进行巧妙的处理之外，Astro还可以对如何交付其他资产（如CSS）进行智能处理。

此外，Astro的目标是将尽可能多的JavaScript提炼成直接的HTML，这意味着通过电线的数据更少，浏览器更少，互动时间也更快。

总的来说，尽管Astro更倾向于静态网站，但它是一个很有前途的创新方法，而且是一个非常活跃的项目，在GitHub上有近1.6万颗星。