【ArchSummit 】会议即将开幕,一起来看架构师在AI时代的“生存法则”总结! 了解详情
写点什么

速度提升 30%!Astro 3.0 正式发布,第一个支持 View Transitions API 的框架

作者:Matthew Phillips 等

  • 2023-09-15
    北京
  • 本文字数:3617 字

    阅读完需:约 12 分钟

速度提升30%!Astro 3.0正式发布,第一个支持 View Transitions API 的框架

Astro 3.0 是首个支持 View Transitions API 的主流 Web 框架,能够轻松在页面导航间实现淡入淡出、滑动、变形及保留有状态元素。在此之前,这些功能还只能在 JavaScript 的单页应用(SPA)中实现。而随着 Web 平台的进步,现在 Astro 3.0 允许每位开发者灵活运用这些功能。


其他版本亮点还包括:


  • 图像优化(稳定):比以往效果更好。

  • 更快的渲染性能:Astro 组件渲染速度提高了 30% 至 75%。

  • 无服务器 SSR 增强:提供接入托管平台的新方法。

  • 为 JSX 提供 HMR 增强:React 与 Preact 获得快速刷新支持。

  • 优化构建输出:提供更清晰、性能更好的 HTML。


Astro 3.0 现已在 npm 上正式开放。大家可以阅 astro.new 在浏览器中试用 Astro 3.0,或者在终端中运行以下命令以创建新项目:


# Create a new Astro 3.0 project:npm create astro@latest
复制代码


如果有意将现有项目升级至 Astro 3.0,您可以参考 v3.0 升级指南,了解各项变更的具体细节与对应升级说明:

https://docs.astro.build/en/guides/upgrade-to/v3/


Astro View Transitions



View Transitions 是一组新的平台 API,能够在多页之间实现浏览器原生级别的转换效果。以往,这种效果只能在单页应用(SPA)中实现,但网络浏览器和规范作者们过去几年间一直在努力将原生页转换纳入 Web 平台,而 Astro 3.0 也有幸成为首个达成这项目标的主流 Web 框架。


借助 Astro View Transitions,我们可以:


  • 将持久元素从一页变形(morph)至另一页;

  • 淡入 / 淡出页面上的内容,减少导航前后的冲突感;

  • 将内容滑入 / 滑出当前页,实现个性化设计;

  • 跨页保留(persist)通用 UI,无论是否刷新。


Astro View Transitions 最大的亮点,在于其使用起来非常简单。只需 2 行代码,我们就能添加各种微妙且雅致的元素,在网站上实现漂亮的淡入效果。您如果感兴趣,可以尝试导入 ViewTransitions 组件并将其添加至任意页的<head>元素内:


---// src/pages/index.astro// Note: Make sure you add the "<ViewTransitions />" component// to other pages as well, and not just one.import {ViewTransitions} from 'astro:transitions';---<head>  <title>My View Transition Demo</title>  <ViewTransitions /></head><body>  <!-- --></body>
复制代码


自 Astro 2.9 版本起,用户们就已经提前享受到了 View Transitions 功能。我们技术社区也一直在开展试验、收集早期反馈,最终塑造出了大家如今看到的终版 API。下面来看社区中的一些出色演示,相信能帮助您了解新功能带来的无穷可能性:



Joe Bell 演示的新 View Transitions 功能:

https://twitter.com/joebell_/status/1688167865961037825



即将推出:无 JavaScript 页转换:

https://twitter.com/astrodotbuild/status/1683514985115426817



Maxi Ferreira 带来的实时演示:

https://astro-records.pages.dev/


可以看到,每段演示都拥有不逊于本机客户端的应用体验。这些可都是实实在在的 Web 应用,所有 HTML 均在服务器端渲染而成,通过 Astro 3.0 和新的 View Transitions API 实现。


我们付出了大量努力,让 View Transitions 得以在所有浏览器上均可正常工作,甚至包括那些尚不支持本机 View Transitions API 的浏览器。Astro 3.0 囊括了大部分浏览器的补充功能,并将其以约 3 kb 小脚本的形式自动添加至页面当中。


要了解关于 View Transitions 的更多细节信息,这里推荐大家参阅我们的 View Transitions 快速指南:

https://docs.astro.build/en/guides/view-transitions/


Chrome 团队发布的精彩文章:

https://developer.chrome.com/docs/web-platform/view-transitions/


另外,也欢迎您浏览 Chrome 开发者博客,具体了解 View Transitions 如何实施落地。

https://developer.chrome.com/blog/astro-view-transitions/


更强渲染性能



Astro 3.0 的渲染性能也显著提升,大多数组件的渲染速度提高了 30%(相较于 Astro 2.9)。在复杂的基准测试中,速度增幅更可达到 75%。


https://gist.github.com/bluwy/0cf63b46915244477cea91c7b34e90ec


之所以能实现这样的加速效果,是因为我们自 Astro 2.10 版本起就在不断重构框架,最终在 Astro 3.0 中修得正果。我们从构建管线的热路径中尽量去除掉不必要的代码,并对剩余代码进行优化。众所周知,非必要生成器和异步代码是影响性能的两大罪魁祸首,您的每一毫秒我们都很关注!


图像优化(稳定)



图像优化功能现已在 Astro 3.0 中稳定实现,并适用于您的所有项目。


您可以从代码库导入图像,并使用新的内置<Image>组件将其放置在页面上。Astro 将帮助大家处理余下的工作:构建管线以自动检测并优化每幅图像。最终渲染的图像标签会添加推断得出的宽度和高度,据此通过自动累积布局偏移(CLS)保护来防止出现布局偏移。


---// Import the <Image /> componentimport { Image } from "astro:assets"// Import a reference to the image itselfimport myImage from "../assets/penguin.png"---
<Image src={myImage} alt="A very cool penguin!" />
复制代码


今年 6 月我们曾经介绍过图像优化功能,在接下来的几个月间,我们又相继取得多项重要改进,包括:


  • 全面支持 Vercel 的内置图像服务。将 imageService: true 添加至您的 Vercel 集成配置当中,即可查看由其全球 CDN 优化得出的实际图像效果。

  • 转用 Sharp 作为我们新的默认优化库。Sharp 取代了我们之前默认使用的 @squoosh/lib,相关维护也将就此中止。

  • 支持远程图像优化。内容团队可以继续通过现有工作流程与 CMS 工具管理自己的图像。


关于图像优化的更多细节信息,请参阅我们的图像指南:

https://docs.astro.build/en/guides/images/


无服务器 SSR 增强



8 月底,我们宣布与 Vercel 建立新的官方托管合作伙伴关系。与 Cervel 的合作让我们得以对 Astro 3.0 中的 SSR 机制进行重大改进。这些新功能将使全体用户获益,且全面支持各种网站托管方式:


  • 按路由代码拆分:为网站中的每个路由创建更小的独立服务器文件。无服务器用户(Vercel、Netlify、Cloudflare 等)可以借此减少每条请求上未使用的代码量,通过加载“瘦身”提高性能。

  • 边缘中间件:Astro 现可捆绑您的中间件以实现边缘位置部署。边缘中间件分布在全球范围之内,并将在尽可能靠近用户的服务器上运行。

  • 托管定制:由于每家托管服务商各有差异,因此我们为 Astro 添加了一个 API,以帮助用户更好地把握这些区别因素。托管适配器(例如 @astrojs/node 和 @astrojs/vercel)能够告知 Astro 各服务商能够支持哪些功能。Astro 则借此信息在开发流程中显示出信息丰富、更具指导性的警告,防止生产错误的意外发生。


上述功能现已登陆 Vercel,您也可以升级任意托管适配器并添加支持。在未来几个月中,我们将与社区维护人员合作,帮助将这些功能引入一切能够提供支持的托管平台。


为 JSX 提供 HMR 增强



由于我们对内部 JSX 构建支持进行了重大重构,因此 React Fast Refresh 现可在 Astro 3.0 中正常运行。React、Preact 和 Solid.js 用户都将在 Astro 3.0 中感受到热模块重新加载(HMR)和开发服务器整体稳定性的显著改进。


快速刷新是一项现代开发功能,能够以智能方式将本地变更推送至浏览器端,且无需刷新页面。快速刷新(与常规 HMR 相比)的独特之处,在于更新内容会被推送至浏览器,且不更改 UI 的当前状态。


在以下演示中,可以看到虽然开发者对模板本身进行了更新,但页面却一直不会刷新,且计数器也不会重置归零。这就是快速刷新在发挥作用。



如果大家构建过 modal 或者其他多步骤 UI,肯定也曾被每次变更之后的页面状态刷新和重置折磨得头痛欲裂。快速刷新解决了这个问题,帮助您进一步加快开发流程。


优化构建输出



我们对 Astro 3.0 中的整体构建输出做出了多项改进,包括:


  • HTML 缩小:Astro 3.0 现在会自动缩小所有 HTML 输出。缩小后的 HTML 能够减少网络加载量、提升整体响应速度。

  • 组件 ID:以往那些根本看不懂的 astro-XXXXXX 类名称现被替换成了新的专用 data-astro-cid-hash HTML 属性。这项变更将让您的 class=""属性更具可读性,整体改善 HTML 输出的组织水平。

  • CSS 内联:Astro 3.0 现在会自动将小块 CSS 内联至 HTML 当中。与旧版 Astro 相比,新设计能够提高页面加载性能。在旧版本中,页面可能会将多个小型 CSS 文件作为浏览器发来的单独请求进行加载,导致资源浪费。


立即体验 Astro 3.0



Astro 3.0 目前已正式登陆 npm。您可以访问 https://astro.new/ 在浏览器中试用 Astro 3.0,或者在终端中运行以下命令以创建新项目:


# Create a new Astro 3.0 project:npm create astro@latest
复制代码


如果有意将现有项目升级至 Astro 3.0,您可以参考 v3.0 升级指南,了解各项变更的具体细节与对应升级说明:

https://docs.astro.build/en/guides/upgrade-to/v3/


原文链接:

https://astro.build/blog/astro-3/


相关阅读:

Web 框架 Astro 2.0 发布,在静态和动态渲染之外提供了混合渲染能力

浅析华为云 Astro 的 5 大关键能力技术

Astro 低代码平台关键能力技术浅析

使用 Astro 如何构建 Astrobot Voice

2023-09-15 10:113997

评论

发布
暂无评论
发现更多内容

LED电子显示屏助广告媒体转型

Dylan

媒体 广告 电子 LED显示屏 led显示屏厂家

使用 TypeScript 从零搭建自己的 Web 框架:框架雏形

RoyLin

typescript

Penpad获OKX 、Scroll生态大力支持,ETH质押创新高

长安区块链

Rest和Http什么关系?

百度搜索:蓝易云

云计算 Linux 运维 Rest 云服务器

基本的Linux命令以及Linux目录结构

百度搜索:蓝易云

云计算 Linux 运维 云服务器 ECS

使用 TypeScript 从零搭建自己的 Web 框架: Electron 环境运行

RoyLin

typescript

2024石家庄煤炭展|石家庄采煤展会|石家庄煤炭装备展览会

coal煤博会

河北煤炭展会 河北煤化工展览会 河北煤博会 石家庄煤炭展会 石家庄煤炭展览会

Penpad再获OKX 、Scroll生态支持,外部资金涌入ETH质押

威廉META

2024石家庄矿业展|石家庄矿山展会|石家庄矿业矿山展览会

coal煤博会

河北矿业展览会 河北矿山展览会 河北矿博会 石家庄矿山展

2024河北煤炭装备展览会|河北采煤装备展会|河北煤博会

coal煤博会

鸿蒙HarmonyOS实战-ArkTS语言(渲染控制)

蜀道山

鸿蒙 HarmonyOS 鸿蒙开发 鸿蒙系统 ArkTS

重塑新格局,拥抱新机遇|2024超聚变合作伙伴大会成功举办

彭飞

Python中两种网络编程方式:Socket和HTTP协议

华为云开发者联盟

Python 华为云 HTTP协议 华为云开发者联盟 企业号2024年4月PK榜

Penpad再获OKX 、Scroll生态支持,外部资金涌入ETH质押

股市老人

运用指针轻松实现多个数据排列

芯动大师

PLC PLC-IoT

2024河北矿业装备展览会|河北智慧矿山展览会|河北矿业展会

coal煤博会

鸿蒙HarmonyOS实战-ArkUI组件(Row/Column)

蜀道山

鸿蒙 HarmonyOS 鸿蒙开发 鸿蒙系统 鸿蒙 Ability

nodejs发布静态https服务器

百度搜索:蓝易云

云计算 Linux 运维 https Node

利物浦都在用的AI教练,真能拯救国足吗?

脑极体

AI

阿里云超大规模边缘容器云助力应用全球化部署

MasterInTech

阿里云 边缘云 边缘容器

KaiwuDB CTO 魏可伟:AIoT,用行业定义数据库

KaiwuDB

数据库 AIOT AIoT数据库

FittenChat:程序员写代码的最好辅助利器,没有之一

知识浅谈

编程 AI

OnelD全链设计:政企业务端到端提效的革新秘籍

鲸品堂

工具 运营商 政企

面试官追问的STW,到底什么是STW?有什么影响?

派大星

JVM Java 面试题

Penpad生态再迎新进展,Season 2 ETH 质押量超200万美元

BlockChain先知

Pet Peeve

EchoZhou

English

科技助力上亿用户隐私安全保护,合合信息两款产品再获CCIA PIA星级标识

合合技术团队

信息安全 隐私保护 合合信息 名片全能王 启信宝

Penpad获OKX 、Scroll生态大力支持,ETH质押创新高

石头财经

tomcat部署、tomcat虚拟主机及tomcat多实例

百度搜索:蓝易云

tomcat Linux 运维 Web JavaEE

品牌升级 | 图扑物联正式启用新LOGO

图扑物联

LOGO 品牌 工业物联网 组态 web组态软件

X314协议市值机器人

区块链技术

速度提升30%!Astro 3.0正式发布,第一个支持 View Transitions API 的框架_架构/框架_InfoQ精选文章