文章来源官网: https://astro.build/blog/astro-4/
大家好!今天,我要为大家介绍一个重磅更新——Astro 4.0!这个版本不仅带来了全新的API,更快的构建速度,还彻底改头换面的文档设计,以及一个独特的新开发工具,极大地增强了本地开发环境的体验。
首先,来简单了解下什么是Astro。Astro是一个专门为内容驱动网站(如博客、营销和电子商务网站)打造的Web框架。如果你需要一个加载迅速且具备出色SEO性能的网站,那么Astro正是你需要的。
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 4.0 引入了开发工具栏 - 一种使用 Astro 增强和自定义本地浏览器开发体验的强大新方法。检查您的页面,发现棘手的可访问性问题,并使用自定义应用程序和第三方工具扩展工具栏本身。
这个工具栏只会在开发期间出现在浏览器中,而不会包含在最终的产品构建中。
它隐藏在页面底部,当您靠近时会弹出,提供多种不同的应用程序:
第三方应用:Astro开发者和第三方集成作者可以利用新的开发者工具栏API,为开发环境构建自己的嵌入式JavaScript应用。这为开发工具的构建开辟了一种全新的方式,可以实现以下功能:
在Astro集成目录中发现新的工具栏应用,并学习如何构建自己的应用。在接下来的几个月中,我们将继续增强工具栏,添加新功能和第三方API。或者,您可以更新您的配置来禁用项目中的应用工具栏,并运行 astro preferences disable devToolbar --global 来在您的机器上全局禁用该工具栏。
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,以加快构建速度。
Astro 3.0首次引入了视图转换,作为构建具有交互性、类似应用的体验的新API,仅使用服务器端渲染的HTML和最少的客户端JavaScript。借助Astro的视图转换,您可以实现如下功能:
自视图转换首次推出以来,我们不断改进对它的支持。Astro 4.0进一步发展了视图转换,带来了更多可配置的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进行了一次全新的改版,带来了重新设计的日志体验。亮点包括:
这些结果使 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现已在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/
由于文章内容篇幅有限,今天的内容就分享到这里,文章结尾,我想提醒您,文章的创作不易,如果您喜欢我的分享,请别忘了点赞和转发,让更多有需要的人看到。同时,如果您想获取更多前端技术的知识,欢迎关注我,您的支持将是我分享最大的动力。我会持续输出更多内容,敬请期待。