文章来源官网：
https://astro.build/blog/astro-4/
大家好！今天，我要为大家介绍一个重磅更新——Astro 4.0！这个版本不仅带来了全新的API，更快的构建速度，还彻底改头换面的文档设计，以及一个独特的新开发工具，极大地增强了本地开发环境的体验。
首先，来简单了解下什么是Astro。Astro是一个专门为内容驱动网站（如博客、营销和电子商务网站）打造的Web框架。如果你需要一个加载迅速且具备出色SEO性能的网站，那么Astro正是你需要的。
Astro 4.0亮点
Astro开发者工具栏：一个新的本地浏览器开发体验增强工具。
国际化（i18n）路由：支持构建全球可访问的网站。
增量内容缓存（实验性功能）：显著提升大型网站的构建性能。
新视图转换API：为网站添加动态交互体验。
重新设计的日志记录和文档：提升开发者体验。
Astro 4.0现已在npm上可用。你可以访问astro.new直接在浏览器中尝试Astro 4.0，或在终端运行以下命令开始一个新项目：
# 创建一个新的Astro 4.0项目：
npm create astro@latest大多数现有代码库升级到Astro 4.0时将不会遇到问题。我们有意设计此版本，尽可能少地更改API，大多数更改集中在集成API上。查看升级指南以获取完整信息和每项更改的详细说明。
https://docs.astro.build/en/guides/upgrade-to/v4/
Astro开发者工具栏：
Astro 4.0 引入了开发工具栏 - 一种使用 Astro 增强和自定义本地浏览器开发体验的强大新方法。检查您的页面，发现棘手的可访问性问题，并使用自定义应用程序和第三方工具扩展工具栏本身。
这个工具栏只会在开发期间出现在浏览器中，而不会包含在最终的产品构建中。
它隐藏在页面底部，当您靠近时会弹出，提供多种不同的应用程序：
Inspect：突出显示页面上的交互式UI组件“岛屿”。这个工具应用旨在利用Astro独特的“岛屿”架构。通过突出显示页面上的“岛屿”，可以帮助您了解哪些元素是交互式的，哪些是轻量级的静态HTML。从这里，您可以查看属性，并点击直接在代码编辑器中打开组件。
Audit：运行一系列测试来审核页面的常见可访问性问题。无需离开浏览器，即可立即捕捉到没有alt文本的图片或配置错误的ARIA角色属性。
Sentry：我们与Sentry合作设计了这个工具栏的初始版本。Sentry是网络应用监控平台的领先者，他们很高兴与我们合作开发一个新的独立调试工具，名为Spotlight.js。12月6日回来，了解更多关于我们合作和Spotlight.js的正式发布的信息！
Storyblok：Storyblok — 我们的官方CMS合作伙伴 — 也为其Astro集成推出了一个工具栏应用。在Astro 4.0中，所有Storyblok用户都会在工具栏中看到一个新应用，它提供了快速访问文档、教程和Storyblok + Astro社区资源的途径。期待将来有更多CMS功能的加入。
第三方应用：Astro开发者和第三方集成作者可以利用新的开发者工具栏API，为开发环境构建自己的嵌入式JavaScript应用。这为开发工具的构建开辟了一种全新的方式，可以实现以下功能：
在浏览器中直接展示测试和linting错误。
通过localtunnel将您的开发环境公开到公共互联网。
轻松访问外部工具，如Squoosh图像优化器。
为内部团队管理面板自动化常见任务，比如在开发过程中切换用户账户。
在Astro集成目录中发现新的工具栏应用，并学习如何构建自己的应用。在接下来的几个月中，我们将继续增强工具栏，添加新功能和第三方API。或者，您可以更新您的配置来禁用项目中的应用工具栏，并运行 astro preferences disable devToolbar --global 来在您的机器上全局禁用该工具栏。
国际化（i18n）路由：
Astro 4.0引入了新的国际化路由功能，帮助您以更少的复杂性构建全球可访问的网站。利用Astro的新功能，如自动i18n路由和用于处理URLs的低级助手函数。
Astro的新内置路由支持允许您通过中心配置定义您的地区：
import { defineConfig } from "astro/config"
export default defineConfig({
i18n: {
defaultLocale: "en",
locales: ["en", "es", "pt-br"]
}
})自定义行为包括：当某个地区内容不可用时的回退机制、添加地区名称到URL中的前缀行为、常见地区和语言代码的别名处理。
对于服务器端渲染（SSR）的“server”构建，Astro自动检测用户的首选语言，以便您可以进一步定制内容，添加重定向或进一步自定义路由处理。
国际化路由支持最初是作为 Astro 3.5 中的实验性功能添加的。今天，它正在进入 Astro 4.0 的稳定版本。阅读新的 Astro 国际化指南以了解更多信息并尝试新的 API。
https://docs.astro.build/en/guides/internationalization/
增量内容缓存（实验性）：
Astro 4.0 引入了增量内容缓存作为一项实验性新功能，可显着提高大型网站的构建性能。
随着代码库随着时间的推移而增长，网站代码库的构建通常需要更长的时间。由于每次构建时都会重新生成相同的页面，静态网站会更加严重地遭受此问题。在 Astro 4.0 中，我们决定引入缓存，以帮助减少 astro build 命令内完成的重复、不必要的工作量。
在现实世界的 Astro Docs 代码库上启用内容缓存后，astro 构建中的相关步骤从 133.20 秒下降到 10.46 秒，速度提高了约 92%。端到端构建时间从 4 分 58 秒缩短至 60 多秒，总构建时间缩短了 80%。我们在其他现实场景中也看到了类似的令人印象深刻的结果。
增量内容缓存挂钩到 Content Collections API。由于 Astro 拥有用于访问和管理集合内内容的 API，因此我们的构建能够使用内部构建清单安全地跟踪集合内的更改。Astro 可以检查每个构建的缓存并重用未更改的内容条目。
对增量内容缓存的实验性支持首次在 Astro 3.5 中引入，名称为“Content Collections Build Cache”。随着我们继续最终确定缓存行为，此功能在 4.0 中仍处于实验阶段。如果您想尝试一下，请立即在项目配置中启用
experimental.contentCollectionCache，以加快构建速度。
新视图转换API（View Transition）：
Astro 3.0首次引入了视图转换，作为构建具有交互性、类似应用的体验的新API，仅使用服务器端渲染的HTML和最少的客户端JavaScript。借助Astro的视图转换，您可以实现如下功能：
在不同页面之间进行动画导航，而无需加载庞大的SPA。
在页面之间保持有状态的UI，例如视频播放器和地图。
自动将一个页面上的常见元素变形到另一个页面。
通过滑动和淡出元素，赋予您的页面更多个性。
自视图转换首次推出以来，我们不断改进对它的支持。Astro 4.0进一步发展了视图转换，带来了更多可配置的API和新的激动人心的用例：
表单：视图转换现在可以与静态HTML表单和动态客户端表单组件互动，触发表单提交而不是链接导航的转换。
预获取：现在，您可以指定链接应该在悬停、轻触或出现在页面上时被预获取。您还可以在单个链接上启用/禁用预获取。
路由公告者：一种内置功能，用于辅助技术。
一个低级别的navigate() JavaScript API，您可以使用它手动触发导航。
完整的生命周期事件系统，您可以插入以自定义加载。您甚至可以使用此功能替换内置的元素交换算法。
我们将继续推广视图转换的强大功能及其提供的体验，这些体验与只使用服务器渲染的HTML和少量JavaScript的重型客户端SPA相媲美。更多功能和改进正在路上！
Astro核心团队特别感谢@martrapp为在Astro 4.0中引入这些新API所做的贡献和工作。阅读更新的视图转换指南或新教程，了解更多关于如何在您自己的项目中使用这些新API。
https://docs.astro.build/en/guides/view-transitions/
https://docs.astro.build/en/tutorials/add-view-transitions/
重新设计的日志记录：
在4.0版本中，Astro CLI进行了一次全新的改版，带来了重新设计的日志体验。亮点包括：
移除不必要的日志记录：以前，一些常见情况会导致双重记录和其他不必要的日志。
更简洁的错误信息：错误信息现在在终端中占用的行数更少，这意味着当出现问题时，在较小的终端中需要滚动的内容更少。
精炼的堆栈跟踪：默认情况下，错误不再包括Vite运行时内部的无用信息。
这些结果使 Astro 的开发和构建命令在新的 Astro 4.0 中更容易阅读、解析和调试。
重新设计的文档：
Starlight是Astro的官方文档模板。它包含了我们在过去两年构建和管理Astro文档网站规模时收集到的所有最佳实践和模式。
如今，我们已经完成了一个完整的循环：docs.astro.build现在由Starlight提供支持！
现在我们已经切换到Starlight，我们对自己的文档网站所做的任何改进都将反馈回Starlight，让所有人受益。感谢Astro文档，Starlight现在拥有了如表达性代码和新的Algolia插件等功能。未来还会有更多新组件，如我们的交互式文件树和多选测验。
我们想要认可Astro核心维护者@TheOtterlord为完成这次升级所做的重大贡献。访问新的文档网站docs.astro.build。如果您想了解更多，欢迎浏览代码库或加入我们的Discord！
http://docs.astro.build/
https://github.com/withastro/docs
开始使用Astro 4.0
Astro 4.0现已在npm上可用。您可以访问astro.new在浏览器中直接尝试Astro 4.0，或在终端运行以下命令来开始一个新项目
# Create a new Astro 4.0 project:
npm create astro@latest将现有项目升级到 Astro 4.0？查看 v4.0 升级指南，了解每个更改的完整详细信息和单独的升级指南。
https://docs.astro.build/en/guides/upgrade-to/v4/
由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。