Astro 4.4

作者
Erika
Emanuele Stoppa
Matthew Phillips
Nate Moore
Bjorn Lu

Astro 4.4 现已发布!此版本包括对开发工具栏的性能审计、改进的流式传输性能、自动推断远程图片尺寸的功能等等。

亮点包括

如何升级

要利用最新功能,请确保您运行的是最新版 Astro。您可以通过运行 @astrojs/upgrade 命令升级到 Astro 4.4。

npx @astrojs/upgrade

或者通过运行您的包管理器的升级命令

npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

性能审计

Astro 4.4 新增了对开发工具栏的性能审计功能。与当前可用的无障碍性审计类似,性能审计将帮助您识别并修复 Astro 站点的性能问题。例如,当延迟加载的图片位于首屏时,开发工具栏现在会发出警告,建议您使用预加载以获得更好的性能。

Shows a tooltip telling the user to use loading='lazy' on an image below the fold.

审计列表

从 Astro 4.4 开始,开发工具栏的审计应用包含一个小型 UI,显示已检测到的问题列表。此列表是快速查看需要解决的问题并跳转到页面相关部分进行修复的好方法。未来,我们将扩展此 UI,以显示每个问题的更多信息,并提供更多关于如何修复它们的指导。

改进的流式传输性能

此版本包括对流式传输的性能改进。我们最近发现 ReadableStream 在 Node.js 上的速度低于预期,因此 Astro 在 Node.js 上运行时已迁移到使用 AsyncIterable。值得注意的是,在极端情况下,此更改将带有大型侧边栏的 Starlight 网站的构建时间缩短了多达 47%。有关更多技术细节,请查看此更改的拉取请求

无需进行任何更改即可利用这些改进,这些改进对静态构建和运行时性能都有益。您可以获得更快的构建时间和改进的运行时性能,这简直是额外福利。

自动推断远程图片的尺寸

感谢 Oliver Speir,Astro 4.4 现在可以推断远程图片的尺寸。新的 inferSize 属性可以替代之前远程图片上必需的 widthheight 属性。这在处理来自 CMS 或其他外部来源的图片时特别有用,因为这些图片的尺寸在构建时是未知的。

要启用此功能,请在 ImagePicture 组件上将 inferSize prop 设置为 true

---
import { Image, Picture } from "astro:assets";
---
<Image src="https://example.com/image.jpg" alt="A cool image" inferSize />
<Picture src="https://example.com/image.jpg" alt="A cool image" inferSize />

或作为 getImage() 的参数

import { getImage } from "astro:assets";
const processedImage = await getImage({ src: "https://example.com/image.jpg", inferSize: true });

请注意,此功能会带来性能开销,尤其是在 SSR 中,因为它需要在页面其余部分渲染之前部分下载图片以推断其尺寸。我们建议仅在必要时使用此功能,并尽可能手动指定 widthheight 属性。

在我们的文档中阅读更多关于远程图片使用 inferSize 的信息。

错误修复

一如既往,此版本还包括额外的错误修复。查看发行说明以了解更多信息。