Astro 4.5 发布,全新 Dev Audit UI 提升开发体验!

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 的语法高亮迁移到了一个名为 ShikijiShiki 分支。最近,Shikiji 已经合并回到了 Shiki 。因此,我们也将回到使用 Shiki

这个改变对用户来说应该是完全透明的,并且不需要对您的代码进行任何更改。然而 Astro 4.5 带来了几项与语法高亮相关的其他好处,包括:

markdown.shikiConfig.experimentalThemes 选项现在已稳定为 markdown.shikiConfig.themes,从而实现更容易地双主题支持。

<Code /> 组件现在接受任意属性名称,并会传递给内部 precode 元素。这使得渲染代码块时样式和灵活性更容易。感谢 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 新引擎!

UI 和 UX 全面升级,Node.js 新官网预览版发布!

Node.js 特别吉祥物:「火箭龟」引领新篇章!

Bun v1.0.30 正式发布,即将提供 Windows 稳定版本!

相关推荐
GIS程序媛—椰子41 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一2 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt