Astro 4.5

作者
Erika
Emanuele Stoppa
Matthew Phillips
Nate Moore
Bjorn Lu

Astro 4.5 现已发布！此版本通过全新、首创的开发审计 UI 改进了开发者体验。在开发过程中自动识别网站性能和可访问性问题——无需离开浏览器。

完整版本亮点包括

访问 astro.new 立即开始使用 Astro 4.5 创建新项目！

要升级现有项目，请使用自动化 @astrojs/upgrade CLI 工具。你也可以通过 npm install 手动升级所有 Astro 依赖。

# Recommended:
npx @astrojs/upgrade


# Manual:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

开发审计 UI

一些网页性能和可访问性问题只能在浏览器中捕获。测试这些问题可能既繁琐又缓慢，许多开发者最终会完全跳过或忘记。

Astro 正通过全新的开发审计 UI 弥合能力与便利性之间的差距。在一个整洁有序的新 UI 面板中可视化和导航审计。你可以按类别浏览问题，点击查看更多详细信息，所有这些操作都在你的开发浏览器内部完成，并与页面上的实际 UI 元素保持一致。

The new audit panel in Astro 4.5. Shows the problem title, a short message explaining the problem, and a longer description as to why this is a problem.

这在尝试理解页面上某个内容被标记为问题的原因时特别有用。点击任何问题，你将立即滚动到页面上的该元素。此外，每个项目都附有解释和详细指南。

新的开发审计 UI 最早在 Astro 4.4 中首次预览。感谢所有在发布前进行测试并提供反馈的人！

视图过渡：重新渲染 Islands 组件

使用视图过渡时，使用 transition:persist 属性持久化的 Astro Islands 组件现在可以在页面更改时使用新 prop 进行更新。

这对于产品列表尤其有用，例如，你可能希望用户设置的过滤器在页面更改时保持不变，但产品列表会根据当前页面进行更新。以前，你必须手动构建组件来更新产品列表。此次更新后，组件在页面更改时将自动使用新的 prop 重新渲染，同时保持相同的状态。

此功能无需任何配置，默认启用。如果需要，可以使用 transition:persist-props 属性来选择退出此行为。

视图过渡：重新运行脚本

使用视图过渡时一个常见的意外是，内联脚本在页面更改时不会自动重新运行。这导致我们每天多次链接到关于页面导航期间脚本行为的文档。

为了方便用户，Astro 4.5 现在包含一个 data-astro-rerun 属性，可以添加到内联脚本标签中，以便在页面更改时自动重新运行脚本

<script data-astro-rerun is:inline>
  console.log('This script will rerun when the page changes!');
</script>

Shiki 1.0

在之前的版本中，我们将 Astro 的语法高亮功能迁移到使用 Shiki 的一个分支，名为 Shikiji。Shikiji 最近已合并回 Shiki。因此，我们也回到了 Shiki！

此更改对用户来说应该是完全透明的，并且不需要对你的代码进行任何更改。然而，Astro 4.5 带来了语法高亮的其他几项改进，包括

  • markdown.shikiConfig.experimentalThemes 选项也已稳定为 markdown.shikiConfig.themes，从而更轻松地支持双主题。
  • <Code /> 组件现在接受任意属性名称，这些属性名称将传递给内部的 pre 或 code 元素。这使得在渲染代码块时样式设置和灵活性更高。感谢 StandardGage 为此功能做出贡献。

多 CDN 资源前缀

Astro 4.5 引入了为不同文件扩展名指定不同 CDN 前缀的功能。当你想从不同的 CDN 提供不同类型的资源时，这会很有用，例如，从一个具有优化缓存策略的独立 CDN 提供图片。

要使用此功能，请将 build.assetsPrefix 选项添加到 astro.config.mjs 中，其中文件扩展名作为键，CDN 前缀作为值

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 Schema

Astro 4.5 引入了自动生成 JSON Schema 数据集合的实验性支持。JSON Schema 是一种强大的方式来描述数据结构，可用于直接在编辑器中为你的数据集合提供验证、自动补全和文档。要启用此功能，请将以下内容添加到你的 astro.config.mjs 中

import { defineConfig } from 'astro/config';


export default defineConfig({
  experimental: {
    contentCollectionJsonSchema: true
  }
});

目前，这些 Schema 需要手动链接到你的数据集合条目，但我们希望在未来的版本中使这个过程自动化。有关如何使用此功能的更多详细信息，请参阅此实验性标志的文档。

实验性：新脚本检测算法

在 Astro 2.10.4 中，添加了一个名为 optimizeHoistedScript 的实验性选项，旨在帮助解决一个长期存在的问题，即脚本即使未使用也可能被包含在页面中。在 Astro 4.5 中，我们正在用一个名为 directRenderScript 的新实验性选项来替换它，这个新选项现在应该能覆盖所有情况，并且更可靠。

要试用此新功能，如果你有 optimizeHoistedScript 选项，请将其删除，并将 directRenderScript 选项添加到你的 astro.config.mjs 中

astro.config.mjs
import { defineConfig } from 'astro/config';


export default defineConfig({
  experimental: {
    optimizeHoistedScript: true,
    directRenderScript: true
  }
});

我们希望在未来的主要版本中将此功能设为默认。有关此功能的更多信息，请参阅我们的配置参考。

错误修复

一如既往，Astro 4.5 包含了更多未能在此发布博文中提及的 bug 修复和小改进。查看完整的发行说明了解更多信息。