12 月 5 日,现代化前端框架 Astro 4.0 版本正式发布!该版本提供了全新的 API、更快的构建速度、重新设计的文档,以及为 Astro 提供了独特的新开发工具,以新颖有趣的方式增强本地开发环境!
Astro 是一个现代化的静态站点生成器和前端框架,它具有独特的设计理念:岛屿架构。它允许开发人员使用组件化的方式构建内容优先的网站,将各种技术栈(如 React、Vue、Svelte 等)的组件无缝集成到同一个项目中。2022 年,Astro 在 JavaScript 明星项目中排名第七,一年新增了 15k Star,目前已获得了 37.4k Star!
了解更多:Astro,这个前端框架有点不一样!
Astro 4.0 的更新亮点包括:
可以直接访问astro.new在浏览器中尝试 Astro 4.0,或者在终端中运行以下命令来创建新项目:
npm create astro@latest
Astro 4.0 引入了开发工具栏,它可以增强和定制在本地浏览器中使用 Astro 的开发体验。可以检查页面、捕捉棘手的无障碍问题,并使用自定义应用和第三方工具来扩展工具栏功能。
Astro 开发工具栏仅在开发过程中出现在浏览器中,不会出现在最终的生产构建中。该工具栏默认隐藏在页面底部,直到需要它时才会显示出来。将鼠标悬停在附近,工具栏将弹出并提供以下几个不同的应用:
props
并单击以直接在代码编辑器中打开组件。alt
文本或配置错误的 ARIA 角色属性的图像,无需离开浏览器。在接下来的几个月中,Astro 团队将继续通过引入新功能和第三方 API 来提高工具栏的性能。如果想在项目中禁用应用工具栏,可以更新配置文件,并运行astro preferences disable devToolbar --global 以在机器上全局禁用工具栏并适用于所有项目。
作为 Web 开发人员,处理国际化通常意味着为代码库增加了许多额外的复杂性:路由、重定向、翻译、相对链接处理等。
Astro 4.0 引入了新的国际化路由,帮助开发者以更少的复杂性构建全球可访问的网站。利用新的 Astro 功能,如自动 i18n 路由和低级别辅助函数,处理 URL。
Astro 新内置的路由支持通过中央配置定义区域设置:
import { defineConfig } from "astro/config"export default defineConfig({ i18n: { defaultLocale: "en", locales: ["en", "es", "pt-br"] }})
可以通过以下方式定制国际化路由的行为:
对于使用服务端渲染(SSR)的 'server' 构建,Astro 能够自动检测用户的首选语言,这样就可以进一步定制内容、添加重定向或者进一步定制路由处理。
国际化路由支持最初是作为实验性功能添加到 Astro 3.5 中的,如今,在 Astro 4.0 中已经成为稳定功能。
Astro 4.0 引入了增量内容缓存作为实验性新功能,可显著加快大型网站的构建性能。
随着时间的推移,代码库不断增长,构建网站的时间会越来越长。静态网站由于在每次构建时重新生成相同的页面,这个问题更加严重。在 Astro 4.0 中,引入了缓存来帮助减少在astro build命令中进行的重复和不必要的工作量。
在 Astro 官方文档项目上启用内容缓存后,astro build中相关步骤的时间从 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 推出了 View Transitions,以使用仅有服务端渲染的 HTML 和最少量的客户端 JavaScript 构建交互式应用体验。通过 Astro 中的 View Transitions,可以执行以下操作:
自首次发布以来,Astro 不断地改进支持,并在 Astro 4.0 版本中进一步完善了 View Transitions API 和用例:
Astro CLI 的日志记录体验改进主要包括以下内容:
这些改进使得 Astro 4.0 版本中的dev和build命令更易于阅读、解析和调试。
Starlight 是 Astro 官方文档模板,包括了在过去两年中构建和管理大规模 Astro 文档站点所收集的所有最佳实践和模式。
现在,docs.astro.build 由 Starlight 驱动。
由于 Astro 文档的贡献,Starlight 现在具有了 Expressive Code 和新的 Algolia 插件等功能。还将推出新的组件,例如交互式文件树。
本文链接:http://www.28at.com/showinfo-26-39529-0.htmlAstro 4.0 正式发布,爆火的现代化前端框架
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com
上一篇: 一文讲解TypeScript中的null和undefined的区别
下一篇: 我常用的几个经典Python模块