使用 Astro 构建超快网站：简介

2025-06-08

使用 Astro 构建超快网站：简介

Astro是目前最热门的新框架之一，它的核心理念是减少客户端 JavaScript 的加载。我决定尝试一下，结果发现它确实能让我写 React，而且它只在需要的时候加载脚本，这带来的性能提升非常显著。

Astro 尚处于早期阶段（撰写本文时版本为 0.17.3），但已经拥有一个强大的社区用户群体。快来加入他们，体验一下吧！

开箱即用

Astro 附带了很多功能，您无需安装任何东西！

.astro文件

.astro文件主要由 HTML 组成，但也包含一些 JavaScript 代码。如果您熟悉 HTML 和 JS，那么您会觉得使用.astro.

这些.astro文件借鉴了 JSX 和 Frontmatter 的概念，制作了一些非常强大的模板。例如：

---

// Area A

import MyComponent from './MyComponent.astro'

let name = 'Cassidy'
let food = ['apple', 'banana', 'cake']

---

<!--Area B-->

<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <MyComponent></MyComponent>

    {name} was here
    <ul>
      {food.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

上述代码片段中的“区域 A”是“Frontmatter”脚本。它完全兼容 JavaScript 和 TypeScript，您可以导入其他组件，或在其中编写任何您想要的脚本。它将在页面构建时运行。此区域也是完全可选的，因此如果您不需要它，可以将其完全删除。

在我看来，“B 区”才是 Astro 真正闪耀的地方。它只是 HTML……直到它不再是 HTML。你可以添加导入的组件（在你选择的任何框架中，例如你可以同时使用 React 和 Vue ），渲染表达式，包含片段，使用原生 HTML<head>等等。

这些.astro文件还可以接收props，因此您可以将它们用作彼此的组件，并在 Frontmatter 中导入给定的值！

.astro组件的功能比我在这里提到的还要强大，如果您想了解更多，请参阅这里的文档。

您最喜欢的框架和库的渲染器

Astro 自动配置了 React、Vue、Svelte 和 Preact 的渲染器！您实际上无需安装这些框架即可使用它们。如果您想添加或删除任何所需的渲染器，可以覆盖此方法。

它还开箱即用地支持 Markdown（因此您可以制作任何文件），并且您也可以在文件中.md使用组件！<Markdown>.astro

你可能会想：“嘿，我以为 Astro 不喜欢客户端 JavaScript？” 没错。当你在 Astro 中创建 React/Vue 或其他组件时，它会默认渲染该组件的 HTML，但不会渲染客户端交互！不过，如果你想使用组件，不用担心，Astro内置了一些 hydration选项供你使用：

  • <MyComponent client:load />MyComponent将在页面加载时呈现
  • <MyComponent client:idle />MyComponent一旦主线程空闲，就会渲染
  • <MyComponent client:visible />将在元素进入视口时渲染MyComponent（即当用户滚动到它时）

基于页面的路由

就像现在的许多其他框架一样，Astropages/已经构建了一个目录，其中的任何文件都会自动成为应用程序中的路由.astro。.md

这也是完全可配置的，所以如果您想将路线指向不同的目录，您可以！

您还可以创建所谓的Collections来根据数据生成页面！例如，如果您有一个博客文章内容管理系统 (CMS)，您可以从该 API 中导入并生成路由和页面。您甚至可以对内容进行分组，并且分页功能也内置其中。Collections API 来自 Astro 的一个 prop，文档在这里。

样式和状态管理

样式和状态管理在 Astro 中仍处于早期实施阶段，但已经提供了相当多的支持。

开箱即用，支持全局 CSS，但作用域 CSS 和 CSS 模块有一些限制。您可以查看样式快速入门了解更多信息，但您最喜欢的样式方式很可能是可行的。

在状态管理方面，您需要的支持取决于您使用的框架/库。对于 React，Context API、Recoil 和 Jotai 目前已完全支持，Redux 则部分支持。Vue 部分支持 Vuex，Svelte 则完全支持 Svelte Stores。如果您喜欢的功能尚未内置，他们的团队乐于接受 PR 和问题。

还有更多

Astro 还支持更多功能，包括站点地图和自定义配置。如果您想了解更多详情，请查看他们的文档。

但在那之前，让我们开始建设吧！

入门

首先，你的机器上需要安装 Node.js，最低版本 14.15.1。这是因为它是基于 ES 模块（简称 ESM）构建的，所以你可以import随心所欲地使用语句。再见require！

创建一个新目录，然后调用：

npm init astro
Enter fullscreen mode Exit fullscreen mode

这将弹出一个应用模板选择器，您可以在其中选择他们的入门套件和其他一些选项。我选择了入门套件，因为我比较自命不凡，喜欢自己动手做东西。然后，您可以根据npm install需要初始化您的 git 仓库，然后使用 运行它npm start。

这样，您就可以开始比赛了！默认页面会显示项目结构，您可以选择使用默认设置，也可以在 中进行配置astro.config.js。

帮我！

别担心，我的小开发者羔羊，我会照顾你的。

部署到 Netlify

点击上方按钮，它会在 Netlify 上为你部署一个 Astro 入门项目，并将其克隆到你的 GitHub 上。它包含你了解的所有 Astro 默认设置，以及一个 React 示例组件，助你快速上手！

或者，如果您更喜欢使用 CLI，您可以运行：

npm init astro my-new-project --template cassidoo/astro-netlify-starter
Enter fullscreen mode Exit fullscreen mode

直到下次！

鏂囩珷鏉ユ簮锛�https://dev.to/cassidoo/build-wicked-fast-sites-with-astro-an-introduction-173j
Devto 翻译
PREV
共同创作 Git 提交
NEXT
Git - 实用备忘单