Astro 0.21 预览版：Vite + WASM = ⚡️

作者
Fred Schott

Astro v0.21.0 将是我们迄今为止最重要的版本。概括来说，它包括

您可以立即试用我们的最新版本 在浏览器中，或者在您机器上的新项目目录中运行 npm install astro@next--compiler。

Astro 正在迅速成为构建更快、内容驱动型网站的生产就绪框架。为了庆祝这一里程碑，以下是 Astro v0.21.0 及更高版本中您可以期待的一些亮点和详细信息。

你好，Vite！

Astro 0.21 正在进行内部构建引擎升级，未来将用 Vite 取代 Snowpack。

我们对 Vite 进行了一些早期实验，结果给我们留下了极其深刻的印象。Vite 维护良好，文档齐全，速度更快，错误消息清晰，并在多个框架中建立了良好的社区认可度。SSR 处理可能有些不稳定，但 Vite 团队已意识到这一点并正在积极解决。

因此，现在当尤雨溪在 Twitter 上谈论 一些出色的性能优化 时，您可以确定 Astro 也能获得同样的速度提升。

反之亦然：我们现在可以将修复和改进贡献回 Vite 社区。现在，当我们修复 Astro 中的一个 SSR 错误时（例如 添加对仅 ESM 的 npm 包的支持），我们也在为所有其他 Vite 用户修复它，包括 SvelteKit。

选择 Vite 还有一个巨大的好处：Rollup 插件。从 v0.21.0 开始，您将能够将整个 Rollup 插件生态系统连接到 Astro。只需几个简单的插件，即可启用 图像优化 和 图标加载 等新功能。太棒了！

从 Snowpack 切换到 Vite 可能会让一些人感到惊讶：Drew 和我都是这两个项目的维护者。这对我们来说是一个 艰难的决定。但最终，在使用了这两种工具之后，我可以自信地说 Vite 将是 Astro 未来发展的绝佳选择。

你好，WASM！

Astro 0.21 带来了另一个巨大的底层改进：全新的 @astrojs/compiler。Astro 的新编译器用 Go 编写，并以 WASM 形式分发。您可以在浏览器中直接运行它，也可以在 Node.js 和 Deno 的服务器上运行。

新的 @astrojs/compiler 解锁了

  • 灵活性： 借助 WASM，可以在任何地方运行编译器。
  • 速度： 利用 Go 编译语言的性能，更快地构建网站。
  • 稳定性： 编写我们自己的编译器使我们能够修复一些长期存在的错误。

您今天就可以在浏览器中，通过 https://astro.js.cn/play 体验新的编译器。这个 REPL 只是拥有一个快速、随处可运行的编译器后所能实现的一个例子。

特别感谢 Nate Moore ，他在这个项目上做得非常出色。

Markdown 中的组件

我们迄今为止最受期待的功能是能够在 Markdown 中直接使用组件。经过数月的工作，我们很高兴地宣布，此功能终于将登陆 Astro。

从 v0.21.0 开始，您可以通过可选的 setup 脚本在 Markdown 的 Frontmatter 中导入组件。导入后，您的组件可以在页面上的任何地方使用

---
title: "Astro 0.21 Early Preview"
setup: |
  import Logo from '../components/Logo.astro';
  import ReactCounter from '../components/Counter.jsx';
---


# Astro now supports components in Markdown!


<Logo />


- Back to markdown here.
- Supports static Astro components.
- Supports dynamic React/Vue/Svelte components!


<ReactCounter start={0} client:load />

这个新的 setup 脚本旨在实现最大程度的灵活性。我们将继续改进此 API，并计划支持默认组件、默认布局和 Markdown 组件覆盖。

HMR，与 HTML 相遇

从 v0.21.0 开始，Astro 将为 Astro 组件和页面提供完整的 HMR 支持。更改代码库中的任何 .astro 文件，开发服务器将更新页面，而无需完全刷新或丢失任何客户端状态。

Astro 一直支持对 React、Preact、Svelte、Vue 和 Solid.js 等客户端 JavaScript 组件进行强大的 HMR 更新。但为 Astro 添加此功能是一个有趣的挑战，因为 Astro 组件只是静态 HTML。我们的“零 JavaScript”方法意味着没有“Astro 运行时”可以进行更新。我们不得不发挥创造力。

现在，Astro 的开发服务器将 HTML 更新发送到浏览器，然后运行一个小型脚本来比较这些更新与当前页面的差异。这创建了一个更细粒度、组件级的 HMR 更新，不会影响页面的其余部分。

立即试用

如果您读到这里，我们非常希望您能帮助我们在发布前试用最新版本。您可以立即试用我们的最新版本 在浏览器中，或者在新的项目目录中运行 npm install astro@next--compiler。您可以在 GitHub 上的 next PR 中关注我们的进展并留下反馈：https://github.com/withastro/astro/pull/1406

在我们的 Discord 服务器 中留下反馈、报告错误并参与 Astro 的开发。您也可以在 Twitter 上 关注我们。