8 月 30 日,现代Astro 3.0 正式发布!端框Astro 3.0 是布爆第一个支持 View Transitions API 的主要 Web 框架。通过这个 API,火的化前可以轻松地在页面导航中实现淡入淡出、现代滑动、形变甚至保持有状态的元素。在过去,这些功能只在使用 JavaScript 编写的单页应用 (SPA) 中可用。但是,由于 Web 平台的进步,现在任何人都可以在 Astro 3.0 中使用这些功能!
Astro 是一个现代化的静态站点生成器和前端框架,它具有独特的设计理念:岛屿架构。它允许开发人员使用组件化的方式构建内容优先的网站,将各种技术栈(如React、Vue、Svelte等)的组件无缝集成到同一个项目中。2022 年,Astro 在 JavaScript 明星项目中排名第七,一年新增了 15k star!
下面是此版本的主要更新亮点:
现在可以通过 npm 来安装 Astro 3.0。可以访问 astro.new 在浏览器中尝试 Astro 3.0,或在终端中运行以下命令开始新的项目:
npm install -g create-astrocreate-astro my-projectcd my-projectnpm start
要将现有项目升级到 Astro 3.0,可以查看 v3.0 升级指南[1],其中包含完整的信息以及每个更改的单独升级指导。
使用 Astro 视图转换,可以:
Astro 视图转换的最大优点在于其使用简单。只需要两行代码,即可为网站添加一个微妙但又体面的淡入淡出动画。使用时,需要导入 ViewTransitions 组件,并将其添加到任何页面的 <head> 元素中即可:
---// src/pages/index.astro// 注意:确保将 "<ViewTransitions />" 组件添加到其他页面,而不仅仅是一个页面。import { ViewTransitions} from 'astro:transitions';---<head> <title>My View Transition Demo</title> <ViewTransitions /></head><body> <!-- --></body>
自 Astro 2.9 开始,Astro 的用户就可以提前使用 View Transitions。从那时起,Astro 的社区一直在进行各种实验,并提供了早期反馈,这些反馈对塑造今天看到的最终 API 起到了很大的帮助。以下是社区中一些示例演示,让你对现在可能实现的效果有一些了解:
这里每个演示都感觉像是一个本地的、客户端应用,但实际上它们并不是。这全部都是服务端渲染的 HTML,通过 Astro 3.0 和全新的 View Transitions API 呈现出来。
Astro 团队投入了大量的精力,使得 View Transitions 在各种浏览器上都能很好地工作,即使是那些尚未支持原生 View Transition API 的浏览器也不例外。Astro 3.0 包含了针对大多数浏览器的备选方案,以一个小巧的、约 3KB 的脚本的形式,Astro 会自动将其添加到页面中。
Astro 3.0 的渲染性能大幅提升,大多数组件的渲染速度比 Astro 2.9 快 30%。在复杂的基准测试中,速度提高可达到 75%。
实现这种速度提升是通过在 Astro 2.10 开始的专门重构工作,并延续到 Astro 3.0 的过程中完成的。Astro 团队从构建流程的热点路径中删除了尽可能多的不必要代码,并对剩余的代码进行了优化。不必要的生成器和异步代码是主要的性能问题,每一毫秒都很重要!
在 Astro 3.0 中,图像优化已经稳定,并可在所有项目中使用。
可以从代码库中导入图像,并使用全新的内置 <Image> 组件将它们放置在页面上。Astro 将处理剩下的部分:构建流程会自动检测并优化每个图像。最终的图像标签会添加一个推断的宽度和高度,以防止自动累积布局移位(CLS)导致的布局变化。这样可以保护页面免受布局移位的影响。
---// 导入 <Image /> 组件import { Image } from "astro:assets"// 导入图像import myImage from "../assets/penguin.png"---<Image src={ myImage} alt="A very cool penguin!" />
上次关于图像优化的更新是在六月份。自那时以来,进行了几项重要的改进,包括:
@squoosh/lib
,后者已经不再维护。本周一,Astro 团队宣布与 Vercel 建立了新的官方托管合作伙伴关系。与Vercel的合作使 Astro 能够在 Astro 3.0 中对 SSR 进行重大改进。这些新功能将使所有用户受益,无论他们选择在哪里托管他们的网站:
这些功能今天都已经在 Vercel 上可用,但任何主机适配器都可以升级以添加支持。在接下来的几个月中,Astro 团队将与社区维护者合作,帮助将这些功能引入其他能够支持它们的托管平台。
由于 Astro 团队对内部JSX构建支持进行了重大改进,React Fast Refresh[2] 现在可以在 Astro 3.0中使用。React、Preact 和 Solid.js 用户都将在 Astro 3.0 中看到热更新(HMR)和整体开发服务器稳定性方面的显着改进。
Fast Refresh 是一种现代开发功能,它可以智能地将本地更改推送到浏览器而无需刷新页面。与常规 HMR 相比,Fast Refresh 的独特之处在于这些更新在不改变当前UI状态的情况下推送到浏览器。
在下面的演示中,可以看到页面永远不会刷新,计数器永远不会重置为零,尽管开发人员更新了模板本身,这就是 Fast Refresh。
如果你曾经在开发过一些需要多个步骤的UI组件(如弹出框),那么可能会遇到这样一个常见的问题,即在每次修改后,页面状态会重置,导致开发效率变慢和沮丧感。使用 Fast Refresh 可以解决这个问题,加快开发流程。
Astro 3.0 版本对构建输出进行了以下改进:
[1]v3.0 升级指南: https://docs.astro.build/en/guides/upgrade-to/v3/。
[2]React Fast Refresh: https://reactnative.dev/docs/fast-refresh。
责任编辑:姜华 来源: 前端充电宝 Astro 3.0前端(责任编辑:知识)
小米 Poco C65 手机发布:配备 Helio G85 处理器、6.74 英寸 90Hz 屏
AI带火云监控 Datadog(DDOG.US)业绩“炸裂”! 股价暴涨超28%
罗氏(RHHBY.US)CD20/CD3 双抗国内获批上市 为全球首个固定疗程DLBCL双抗疗法
比速科技(01372.HK)发布公告:拟发行4000万股认购股份