Astro 3.0

作者
Matthew Phillips
Erika
Emanuele Stoppa
Bjorn Lu
Nate Moore

Astro 3.0 隆重登场！

Astro 3.0 是首个支持 View Transitions API 的主流 Web 框架。轻松实现页面导航时元素的淡入淡出、滑动、变形，甚至保持有状态元素的持久化。直到最近，这还只能在 JavaScript 单页应用程序 (SPA) 中实现。但得益于 Web 平台的进步，这些功能现在已在 Astro 3.0 中向所有人开放。

其他发布亮点包括

  • 图像优化（稳定版）：不再是实验性功能，表现更佳。
  • 更快的渲染性能：Astro 组件渲染速度提升 30-75%。
  • Serverless SSR 增强：连接到您的托管平台的新方式。
  • JSX 的 HMR 增强：支持 React 和 Preact 的 Fast Refresh。
  • 优化的构建输出：更简洁、性能更好的 HTML。

Astro 3.0 现已在 npm 上发布。访问 astro.new 在您的浏览器中体验 Astro 3.0，或在您的终端中运行以下命令来启动一个新项目：

# Create a new Astro 3.0 project:
npm create astro@latest

要将现有项目升级到 Astro 3.0 吗？请查看 v3.0 升级指南，了解所有详细信息以及针对每个变更的单独升级指导。

Astro 视图过渡 (View Transitions)

视图过渡 (View Transitions) 是一组新的平台 API，可实现页面之间的原生浏览器过渡效果。从历史上看，这只可能在单页应用程序 (SPA) 中实现，但过去几年，Web 浏览器和规范作者一直致力于将原生页面过渡引入平台，而 Astro 3.0 是首个将其引入主流的 Web 框架。

借助 Astro 视图过渡，您可以：

  • 将持久化元素从一个页面变形到另一个页面
  • 使页面内容淡入淡出，以获得更流畅的导航效果
  • 使页面内容滑动进出，增添更多个性
  • 在页面之间持久化通用 UI，无论是否刷新

Astro 中视图过渡的最佳之处在于其使用简单。只需两行代码，您就可以为您的网站添加一个微妙而雅致的淡入淡出动画！要亲自尝试，请导入 ViewTransitions 组件并将其添加到任何页面的 <head> 元素中：

src/pages/index.astro
---
// Note: Make sure you add the "<ViewTransitions />" component
// to other pages as well, and not just one.
import {ViewTransitions} from 'astro:transitions';
---
<head>
  <title>My View Transition Demo</title>
  <ViewTransitions />
</head>
<body>
  <!-- -->
</body>

自 Astro 2.9 发布以来，Astro 用户就已提前体验到视图过渡。我们的社区一直在进行实验，提供了早期反馈，帮助塑造了您今天看到的最终 API。以下是我们社区中一些最受欢迎的演示，让您了解现在可以实现的功能：

观看 Joe Bell 演示新的视图过渡功能。

即将推出：零 JavaScript 页面过渡

尝试 Maxi Ferreira 制作的这个实时演示。

每个演示都感觉像是原生的客户端应用程序。但它们不是。它们都是服务器渲染的 HTML，由 Astro 3.0 和新的视图过渡 API 赋予了生命。

我们投入了大量精力，使视图过渡在所有浏览器中都能良好运行，即使是那些尚不支持原生视图过渡 API 的浏览器。Astro 3.0 包含了对大多数浏览器的回退支持，形式是一个小型 (~3kb) 脚本，Astro 会自动将其添加到您的页面。

在我们的便捷视图过渡指南中了解更多关于视图过渡的信息，或阅读 Chrome 团队撰写的这篇关于浏览器 API 的精彩文章。此外，请在 Chrome 开发者博客上阅读更多关于我们采用视图过渡的历程。

更快的渲染性能

Astro 3.0 的渲染性能得到了显著提升，大多数组件的渲染速度比 Astro 2.9 快 30%。在复杂的基准测试中，速度提升可高达 75%。

实现这种速度提升是专门重构工作的结果，该工作始于 Astro 2.10，并一直延续到 Astro 3.0。我们从构建管道的热路径中尽可能多地删除了不必要的代码，并优化了剩余部分。不必要的生成器和异步代码是两大罪魁祸首。每一毫秒都至关重要！

图像优化（稳定版）

图像优化功能现在已在 Astro 3.0 中稳定，并可用于所有项目。

您可以从代码库中导入图像，并使用新的内置 <Image> 组件将其放置在页面上。Astro 将处理其余部分：构建管道将自动为您检测和优化每张图像。最终渲染的图像标签将自动添加推断的宽度和高度，以通过自动累积布局偏移 (CLS) 保护来防止布局偏移。

---
// Import the <Image /> component
import { Image } from "astro:assets"
// Import a reference to the image itself
import myImage from "../assets/penguin.png"
---


<Image src={myImage} alt="A very cool penguin!" />

我们上次在六月撰写了关于图像优化的文章。自那时起，我们已经实现了几项重要的改进，包括：

  • 完全支持Vercel 的内置图像服务。将 imageService: true 添加到您的 Vercel 集成配置中，即可通过他们的全球 CDN 优化您的生产图像。
  • 迁移到 Sharp 作为新的默认优化库。Sharp 取代了我们之前默认的 @squoosh/lib，该库已不再维护。
  • 支持优化远程图像。内容团队可以继续使用其现有工作流程和 CMS 工具管理图像。

在我们的新图像指南中了解更多关于图像优化的信息。

Serverless SSR 增强

周一，我们宣布与 Vercel 建立新的官方托管合作伙伴关系。与 Vercel 的合作使我们能够在 Astro 3.0 中对 SSR 功能进行重大增强。这些新功能将惠及所有用户，无论他们选择在哪里托管其网站：

  • 按路由代码分割 - 为您网站中的每个路由创建更小的独立服务器文件。Serverless 用户（Vercel、Netlify、Cloudflare 等）现在可以通过减少每次请求中加载未使用的代码来提升性能。
  • 边缘中间件 - Astro 现在可以将您的中间件打包，以部署到边缘。边缘中间件在全球范围内分发，并在尽可能靠近用户的地方的服务器上运行。
  • 主机自定义：由于没有两个托管提供商是完全相同的，我们已在 Astro 中添加了一个 API，帮助用户更好地理解这些差异。托管适配器（如 @astrojs/node 和 @astrojs/vercel）现在可以告诉 Astro 它们支持哪些功能。Astro 可以使用此信息在开发过程中显示更有用、信息更丰富的警告，并防止意外的生产错误。

这些功能目前均可在 Vercel 上使用，但任何托管适配器都可以升级以添加支持。在未来几个月，我们将与社区维护者合作，帮助将这些功能引入任何能够支持它们的托管平台。

JSX 的 HMR 增强

得益于我们内部 JSX 构建支持的重大重构，React Fast Refresh 现在已在 Astro 3.0 中生效。React、Preact 和 Solid.js 用户都将在 Astro 3.0 中看到热模块替换 (HMR) 和整体开发服务器稳定性的显著改进。

Fast Refresh 是一项现代开发功能，它可以在不刷新页面的情况下智能地将本地更改推送到浏览器。Fast Refresh 独特之处（与常规 HMR 相比）在于，这些更新被推送到浏览器时不会改变当前 UI 的状态。

在下面的演示中，请注意页面如何永不刷新，计数器如何永不重置为零，尽管开发者更新了模板本身。这就是 Fast Refresh。

A code editor side by side with a window showing a React component with a timer running. When the code editor saves a change, the page updates only the changed elements, meaning the timer can keep running uninterrupted.

如果您曾构建过模态框或某些多步 UI，那么您可能经历过每次更改后页面状态刷新并重置的常见挫败感。Fast Refresh 解决了这个问题，从而加快了您的开发工作流程。

优化的构建输出

我们在 3.0 版中对整体构建输出进行了多项改进，包括：

  • HTML 压缩：Astro 3.0 现在将自动压缩所有 HTML 输出。压缩后的 HTML 会导致网络传输的数据量更小，整体响应时间更快。
  • 组件 ID：那些嘈杂的 astro-XXXXXX 类名已由一个新的专用 data-astro-cid-hash HTML 属性取代。此更改使您的 class="" 属性更具可读性，并使 HTML 输出整体更具条理性。
  • CSS 内联：Astro 3.0 现在将自动将小块 CSS 内联到您的 HTML 中。与旧版 Astro 相比，这提高了页面加载性能，旧版 Astro 可能会将许多较小的 CSS 文件作为单独的请求从浏览器加载。

立即体验 Astro 3.0

Astro 3.0 现已在 npm 上发布。访问 https://astro.new/ 在您的浏览器中体验 Astro 3.0，或在您的终端中运行以下命令来启动一个新项目：

# Create a new Astro 3.0 project:
npm create astro@latest

要将现有项目升级到 Astro 3.0 吗？请查看 v3.0 升级指南，了解所有详细信息以及针对每个变更的单独升级指导。