Astro 3.0 正式發(fā)布，爆火的現(xiàn)代化前端框架
8 月 30 日，Astro 3.0 正式發(fā)布！Astro 3.0 是第一個(gè)支持 View Transitions API 的主要 Web 框架。通過(guò)這個(gè) API，可以輕松地在頁(yè)面導(dǎo)航中實(shí)現(xiàn)淡入淡出、滑動(dòng)、形變甚至保持有狀態(tài)的元素。在過(guò)去，這些功能只在使用 JavaScript 編寫的單頁(yè)應(yīng)用 (SPA) 中可用。但是，由于 Web 平臺(tái)的進(jìn)步，現(xiàn)在任何人都可以在 Astro 3.0 中使用這些功能！
Astro 是一個(gè)現(xiàn)代化的靜態(tài)站點(diǎn)生成器和前端框架，它具有獨(dú)特的設(shè)計(jì)理念：島嶼架構(gòu)。它允許開發(fā)人員使用組件化的方式構(gòu)建內(nèi)容優(yōu)先的網(wǎng)站，將各種技術(shù)棧（如React、Vue、Svelte等）的組件無(wú)縫集成到同一個(gè)項(xiàng)目中。2022 年，Astro 在 JavaScript 明星項(xiàng)目中排名第七，一年新增了 15k star！
下面是此版本的主要更新亮點(diǎn)：
- 圖片優(yōu)化（穩(wěn)定版）：已取消標(biāo)志，并且比以往更好。
- 更快的渲染性能：Astro 組件的渲染速度提高了 30-75%。
- 用于 Serverless 的 SSR 改進(jìn)：與托管平臺(tái)連接的新方式。
- 用于 JSX 的熱更新改進(jìn)：支持 React 和 Preact 的快速刷新。
- 優(yōu)化的構(gòu)建輸出：更干凈、更高效的 HTML。
現(xiàn)在可以通過(guò) npm 來(lái)安裝 Astro 3.0?？梢栽L問(wèn) astro.new 在瀏覽器中嘗試 Astro 3.0，或在終端中運(yùn)行以下命令開始新的項(xiàng)目：
npm install -g create-astro
create-astro my-project
cd my-project
npm start要將現(xiàn)有項(xiàng)目升級(jí)到 Astro 3.0，可以查看 v3.0 升級(jí)指南[1]，其中包含完整的信息以及每個(gè)更改的單獨(dú)升級(jí)指導(dǎo)。
Astro 視圖轉(zhuǎn)換
使用 Astro 視圖轉(zhuǎn)換，可以：
- 將一個(gè)頁(yè)面上的持久化元素變形為另一個(gè)頁(yè)面上的元素。
- 實(shí)現(xiàn)內(nèi)容在頁(yè)面上的淡入淡出效果，使導(dǎo)航效果更加平滑。
- 實(shí)現(xiàn)內(nèi)容在頁(yè)面上的滑動(dòng)效果，增添一些個(gè)性化。
- 在頁(yè)面之間保留共用的用戶界面，無(wú)論是否刷新頁(yè)面。
Astro 視圖轉(zhuǎn)換的最大優(yōu)點(diǎn)在于其使用簡(jiǎn)單。只需要兩行代碼，即可為網(wǎng)站添加一個(gè)微妙但又體面的淡入淡出動(dòng)畫。使用時(shí)，需要導(dǎo)入 ViewTransitions 組件，并將其添加到任何頁(yè)面的 <head> 元素中即可：
---
// src/pages/index.astro
// 注意：確保將 "<ViewTransitions />" 組件添加到其他頁(yè)面，而不僅僅是一個(gè)頁(yè)面。
import {ViewTransitions} from 'astro:transitions';
---
<head>
<title>My View Transition Demo</title>
<ViewTransitions />
</head>
<body>
<!-- -->
</body>自 Astro 2.9 開始，Astro 的用戶就可以提前使用 View Transitions。從那時(shí)起，Astro 的社區(qū)一直在進(jìn)行各種實(shí)驗(yàn)，并提供了早期反饋，這些反饋對(duì)塑造今天看到的最終 API 起到了很大的幫助。以下是社區(qū)中一些示例演示，讓你對(duì)現(xiàn)在可能實(shí)現(xiàn)的效果有一些了解：
這里每個(gè)演示都感覺像是一個(gè)本地的、客戶端應(yīng)用，但實(shí)際上它們并不是。這全部都是服務(wù)端渲染的 HTML，通過(guò) Astro 3.0 和全新的 View Transitions API 呈現(xiàn)出來(lái)。
Astro 團(tuán)隊(duì)投入了大量的精力，使得 View Transitions 在各種瀏覽器上都能很好地工作，即使是那些尚未支持原生 View Transition API 的瀏覽器也不例外。Astro 3.0 包含了針對(duì)大多數(shù)瀏覽器的備選方案，以一個(gè)小巧的、約 3KB 的腳本的形式，Astro 會(huì)自動(dòng)將其添加到頁(yè)面中。
更快的渲染性能
Astro 3.0 的渲染性能大幅提升，大多數(shù)組件的渲染速度比 Astro 2.9 快 30%。在復(fù)雜的基準(zhǔn)測(cè)試中，速度提高可達(dá)到 75%。
實(shí)現(xiàn)這種速度提升是通過(guò)在 Astro 2.10 開始的專門重構(gòu)工作，并延續(xù)到 Astro 3.0 的過(guò)程中完成的。Astro 團(tuán)隊(duì)從構(gòu)建流程的熱點(diǎn)路徑中刪除了盡可能多的不必要代碼，并對(duì)剩余的代碼進(jìn)行了優(yōu)化。不必要的生成器和異步代碼是主要的性能問(wèn)題，每一毫秒都很重要！
圖像優(yōu)化（穩(wěn)定）
在 Astro 3.0 中，圖像優(yōu)化已經(jīng)穩(wěn)定，并可在所有項(xiàng)目中使用。
可以從代碼庫(kù)中導(dǎo)入圖像，并使用全新的內(nèi)置 <Image> 組件將它們放置在頁(yè)面上。Astro 將處理剩下的部分：構(gòu)建流程會(huì)自動(dòng)檢測(cè)并優(yōu)化每個(gè)圖像。最終的圖像標(biāo)簽會(huì)添加一個(gè)推斷的寬度和高度，以防止自動(dòng)累積布局移位（CLS）導(dǎo)致的布局變化。這樣可以保護(hù)頁(yè)面免受布局移位的影響。
---
// 導(dǎo)入 <Image /> 組件
import { Image } from "astro:assets"
// 導(dǎo)入圖像
import myImage from "../assets/penguin.png"
---
<Image src={myImage} alt="A very cool penguin!" />上次關(guān)于圖像優(yōu)化的更新是在六月份。自那時(shí)以來(lái)，進(jìn)行了幾項(xiàng)重要的改進(jìn)，包括：
- 完全支持 Vercel 內(nèi)置的圖像服務(wù)。在 Vercel 集成配置中添加 imageService: true，即可通過(guò)其全球 CDN 對(duì)生產(chǎn)圖像進(jìn)行優(yōu)化。
- 遷移到 Sharp 作為新的默認(rèn)優(yōu)化庫(kù)。Sharp 取代了之前的默認(rèn)庫(kù)
@squoosh/lib，后者已經(jīng)不再維護(hù)。 - 支持優(yōu)化遠(yuǎn)程圖像。內(nèi)容團(tuán)隊(duì)可以繼續(xù)使用現(xiàn)有的工作流程和 CMS 工具來(lái)管理圖像。
Serverless的SSR增強(qiáng)功能
本周一，Astro 團(tuán)隊(duì)宣布與 Vercel 建立了新的官方托管合作伙伴關(guān)系。與Vercel的合作使 Astro 能夠在 Astro 3.0 中對(duì) SSR 進(jìn)行重大改進(jìn)。這些新功能將使所有用戶受益，無(wú)論他們選擇在哪里托管他們的網(wǎng)站：
- 按路由代碼拆分：為網(wǎng)站中的每個(gè)路由創(chuàng)建較小、獨(dú)立的服務(wù)器文件。Serverless 用戶（如Vercel、Netlify、Cloudflare等）現(xiàn)在可以通過(guò)減少每個(gè)請(qǐng)求上未使用的代碼的加載來(lái)提高性能。
- Edge 中間件：Astro 現(xiàn)在可以打包中間件以在邊緣進(jìn)行部署。邊緣中間件在全球范圍內(nèi)分發(fā)，并在盡可能靠近用戶的服務(wù)器上運(yùn)行。
- 主機(jī)定制化：由于沒有兩個(gè)托管提供商是完全相同的，在 Astro 中添加了一個(gè)API，幫助用戶更好地理解這些差異。主機(jī)適配器（如@astrojs/node和@astrojs/vercel）現(xiàn)在可以告訴 Astro 它們支持哪些功能。Astro 可以利用這些信息在開發(fā)過(guò)程中提供更有用、更詳細(xì)的警告，并防止意外的生產(chǎn)錯(cuò)誤。
這些功能今天都已經(jīng)在 Vercel 上可用，但任何主機(jī)適配器都可以升級(jí)以添加支持。在接下來(lái)的幾個(gè)月中，Astro 團(tuán)隊(duì)將與社區(qū)維護(hù)者合作，幫助將這些功能引入其他能夠支持它們的托管平臺(tái)。
JSX的熱更新增強(qiáng)功能
由于 Astro 團(tuán)隊(duì)對(duì)內(nèi)部JSX構(gòu)建支持進(jìn)行了重大改進(jìn)，React Fast Refresh[2] 現(xiàn)在可以在 Astro 3.0中使用。React、Preact 和 Solid.js 用戶都將在 Astro 3.0 中看到熱更新（HMR）和整體開發(fā)服務(wù)器穩(wěn)定性方面的顯著改進(jìn)。
Fast Refresh 是一種現(xiàn)代開發(fā)功能，它可以智能地將本地更改推送到瀏覽器而無(wú)需刷新頁(yè)面。與常規(guī) HMR 相比，F(xiàn)ast Refresh 的獨(dú)特之處在于這些更新在不改變當(dāng)前UI狀態(tài)的情況下推送到瀏覽器。
在下面的演示中，可以看到頁(yè)面永遠(yuǎn)不會(huì)刷新，計(jì)數(shù)器永遠(yuǎn)不會(huì)重置為零，盡管開發(fā)人員更新了模板本身，這就是 Fast Refresh。
如果你曾經(jīng)在開發(fā)過(guò)一些需要多個(gè)步驟的UI組件（如彈出框），那么可能會(huì)遇到這樣一個(gè)常見的問(wèn)題，即在每次修改后，頁(yè)面狀態(tài)會(huì)重置，導(dǎo)致開發(fā)效率變慢和沮喪感。使用 Fast Refresh 可以解決這個(gè)問(wèn)題，加快開發(fā)流程。
優(yōu)化構(gòu)建輸出
Astro 3.0 版本對(duì)構(gòu)建輸出進(jìn)行了以下改進(jìn)：
- HTML壓縮：Astro 3.0 現(xiàn)在會(huì)自動(dòng)壓縮所有HTML輸出。壓縮的HTML可以減少傳輸負(fù)載并提高整體響應(yīng)時(shí)間。
- 組件ID：那些 astro-XXXXXX 類名已被替換為新的、專用的 data-astro-cid-hash HTML 屬性。這個(gè)改變使得 class 屬性更易讀，整體上有一個(gè)更有組織的HTML 輸出。
- CSS內(nèi)聯(lián)：Astro 3.0 現(xiàn)在會(huì)自動(dòng)將小塊的 CSS 內(nèi)聯(lián)到 HTML 中。與 Astro 的舊版本相比，頁(yè)面加載性能得到了改進(jìn)，以前的版本可能會(huì)在瀏覽器中作為單獨(dú)的請(qǐng)求加載許多較小的 CSS 文件。
[1]v3.0 升級(jí)指南： https://docs.astro.build/en/guides/upgrade-to/v3/。
[2]React Fast Refresh： https://reactnative.dev/docs/fast-refresh。
