Astro 3.0 正式發布，爆火的現代化前端框架
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！
下面是此版本的主要更新亮點：
- 圖片優化（穩定版）：已取消標志，并且比以往更好。
- 更快的渲染性能：Astro 組件的渲染速度提高了 30-75%。
- 用于 Serverless 的 SSR 改進：與托管平臺連接的新方式。
- 用于 JSX 的熱更新改進：支持 React 和 Preact 的快速刷新。
- 優化的構建輸出：更干凈、更高效的 HTML。
現在可以通過 npm 來安裝 Astro 3.0。可以訪問 astro.new 在瀏覽器中嘗試 Astro 3.0，或在終端中運行以下命令開始新的項目：
npm install -g create-astro
create-astro my-project
cd my-project
npm start要將現有項目升級到 Astro 3.0，可以查看 v3.0 升級指南[1]，其中包含完整的信息以及每個更改的單獨升級指導。
Astro 視圖轉換
使用 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!" />上次關于圖像優化的更新是在六月份。自那時以來，進行了幾項重要的改進，包括：
- 完全支持 Vercel 內置的圖像服務。在 Vercel 集成配置中添加 imageService: true，即可通過其全球 CDN 對生產圖像進行優化。
- 遷移到 Sharp 作為新的默認優化庫。Sharp 取代了之前的默認庫
@squoosh/lib，后者已經不再維護。 - 支持優化遠程圖像。內容團隊可以繼續使用現有的工作流程和 CMS 工具來管理圖像。
Serverless的SSR增強功能
本周一，Astro 團隊宣布與 Vercel 建立了新的官方托管合作伙伴關系。與Vercel的合作使 Astro 能夠在 Astro 3.0 中對 SSR 進行重大改進。這些新功能將使所有用戶受益，無論他們選擇在哪里托管他們的網站：
- 按路由代碼拆分：為網站中的每個路由創建較小、獨立的服務器文件。Serverless 用戶（如Vercel、Netlify、Cloudflare等）現在可以通過減少每個請求上未使用的代碼的加載來提高性能。
- Edge 中間件：Astro 現在可以打包中間件以在邊緣進行部署。邊緣中間件在全球范圍內分發，并在盡可能靠近用戶的服務器上運行。
- 主機定制化：由于沒有兩個托管提供商是完全相同的，在 Astro 中添加了一個API，幫助用戶更好地理解這些差異。主機適配器（如@astrojs/node和@astrojs/vercel）現在可以告訴 Astro 它們支持哪些功能。Astro 可以利用這些信息在開發過程中提供更有用、更詳細的警告，并防止意外的生產錯誤。
這些功能今天都已經在 Vercel 上可用，但任何主機適配器都可以升級以添加支持。在接下來的幾個月中，Astro 團隊將與社區維護者合作，幫助將這些功能引入其他能夠支持它們的托管平臺。
JSX的熱更新增強功能
由于 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 版本對構建輸出進行了以下改進：
- HTML壓縮：Astro 3.0 現在會自動壓縮所有HTML輸出。壓縮的HTML可以減少傳輸負載并提高整體響應時間。
- 組件ID：那些 astro-XXXXXX 類名已被替換為新的、專用的 data-astro-cid-hash HTML 屬性。這個改變使得 class 屬性更易讀，整體上有一個更有組織的HTML 輸出。
- CSS內聯：Astro 3.0 現在會自動將小塊的 CSS 內聯到 HTML 中。與 Astro 的舊版本相比，頁面加載性能得到了改進，以前的版本可能會在瀏覽器中作為單獨的請求加載許多較小的 CSS 文件。
[1]v3.0 升級指南： https://docs.astro.build/en/guides/upgrade-to/v3/。
[2]React Fast Refresh： https://reactnative.dev/docs/fast-refresh。
