Astro 4.5 现已推出!此版本通过全新的首创性 Dev Audit UI 改进了开发者体验。在开发过程中自动识别网站性能和可访问性问题,无需离开浏览器。
完整发布亮点包括:
- Dev Audit UI
- 视图过渡:重新渲染岛屿
- 视图过渡:重新运行脚本
- Shiki 1.0
- 多 CDN 资产前缀
- 实验性:JSON Schemas 数据集
- 实验性:新的脚本检测算法
访问 astro.new,立即开始使用 Astro 4.5 创建新项目!
要升级现有项目,请使用自动化的 @astrojs/upgrade
CLI 工具。您也可以通过 npm install
手动升级所有 Astro 依赖项。
bash
# Recommended
npx @astrojs/upgrade
# Manual
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest
Dev Audit UI
一些网络性能和可访问性问题只能在浏览器中捕获。测试这些问题可能会很繁琐和缓慢,许多开发人员最终选择跳过或完全忘记。
Astro 正在通过全新的 Dev Audit UI 弥合功能与便利之间的差距。在一个新的、整洁有序的UI面板中可视化并导航审核。按类别浏览问题,并单击查看更多详细信息,所有这些都可以从您的开发浏览器内完成,并且与页面上实际 UI 元素对齐显示。
这在尝试理解为什么页面上的某些内容被标记为问题时特别有用。单击任何问题,您将立即滚动到页面上的该元素。此外,每个项目都附带说明和详细指导。
新的 Dev Audit UI 首次在 Astro 4.4 中进行了预览。感谢所有在发布之前测试并提供反馈意见的人!
视图过渡:重新渲染岛屿
当使用视图过渡时,使用 transition:persist
属性持久化的 Astro 岛屿现在可以在页面更改时通过新属性进行更新。
例如,对于产品列表而言,这可能很有用,您可能希望用户设置的筛选器在页面更改时保持不变,但基于当前页面更新产品列表。以前,您必须手动构建组件来更新产品列表。经过此更新后,在页面更改时组件将自动重新呈现具有新属性,并同时保持相同状态。
此功能无需任何配置,默认启用。如果需要,则可以使用 transition:persist-props
属性选择退出此行为。
视图过渡:重新运行脚本
在使用视图转换时常见的惊喜是,内联脚本在页面更改时不会自动重新运行。这导致我们每天多次链接到有关页面导航期间脚本行为的文档。
为了让我们的用户更容易使用,Astro 4.5 现在包括一个 data-astro-rerun
属性,可以添加到内联脚本标签中,在页面更改时自动重新运行脚本:
html
<script data-astro-rerun is:inline>
console.log('This script will rerun when the page changes!');
</script>
Shiki 1.0
在之前的版本中,我们将 Astro 的语法高亮迁移到了一个名为 Shikiji 的 Shiki 分支。最近,Shikiji 已经合并回到了 Shiki 。因此,我们也将回到使用 Shiki!
这个改变对用户来说应该是完全透明的,并且不需要对您的代码进行任何更改。然而 Astro 4.5 带来了几项与语法高亮相关的其他好处,包括:
markdown.shikiConfig.experimentalThemes
选项现在已稳定为 markdown.shikiConfig.themes
,从而实现更容易地双主题支持。
<Code />
组件现在接受任意属性名称,并会传递给内部 pre
或 code
元素。这使得渲染代码块时样式和灵活性更容易。感谢 StandardGage 贡献了这一功能。
多 CDN 资产前缀
Astro 4.5 引入了为不同文件扩展名指定不同 CDN 前缀的功能。当您希望从不同 CDN 提供不同类型的资产时,例如,从具有优化缓存策略的单独 CDN 提供图像时,这将非常有用。
要使用此功能,请在您的 astro.config.mjs
中添加 build.assetsPrefix
选项,其中文件扩展名作为键,CDN 前缀作为值:
js
// astro.config.mjs
import { defineConfig } from "astro/config"
export default defineConfig({
build: {
assetsPrefix: {
'js': "https://js.cdn.example.com",
'png': "https://images.cdn.example.com",
'fallback': "https://generic.cdn.example.com"
}
}
})
感谢张志鹏为贡献此功能。有关 build.assetsPrefix
的更多信息,请参阅我们的配置参考。
实验性:JSON Schemas 数据集
Astro 4.5 引入了自动生成 JSON Schemas 数据集的实验性支持。 JSON Schemas 是描述数据形状的强大方式,可用于在编辑器中直接为您的数据集提供验证、自动完成和文档。 要启用此功能,请将以下内容添加到您的 astro.config.mjs
文件中:
js
import { defineConfig } from 'astro/config';
export default defineConfig({
experimental: {
contentCollectionJsonSchema: true
}
});
目前,这些模式需要手动链接到您的数据收集条目,但我们希望在未来的版本中将此过程自动化。有关如何使用此功能的更多详细信息,请参阅此实验标志的文档。
实验性:新的脚本检测算法
在 Astro 2.10.4 中,添加了一个名为 optimizeHoistedScript
的实验性选项,以帮助解决一个长期存在的问题,即尽管未使用脚本也可能被包含在页面中。在 Astro 4.5 中,我们将 optimizeHoistedScript
替换为一个名为 directRenderScript
的新实验性选项,该选项现在应该涵盖所有情况并更加可靠。
要尝试这个新功能,请删除 optimizeHoistedScript
选项并将 directRenderScript
选项添加到您的 astro.config.mjs
文件中:
js
// astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({
experimental: {
optimizeHoistedScript: true,
directRenderScript: true
}
});
我们希望在未来的主要版本中将此功能设为默认值。有关此功能的更多信息,请参阅我们的配置参考文档。
Bug 修复
与往常一样,Astro 4.5 包括更多的错误修复和无法包含在此发布帖中的较小改进。查看完整的发布说明以了解更多信息。
往期回顾
Biome v1.6 发布,支持 Astro、Svelte 和 Vue 文件!
基于 Rust 的 JS 打包工具:Rolldown 正式开源!
初步体验 Tailwind CSS v4,解析 v4 路线图和变化!
Tailwind CSS v4 预览版:高性能 CSS 新引擎!