Astro 4.0 正式發布，爆火的現代化前端框架
12 月 5 日，現代化前端框架 Astro 4.0 版本正式發布！該版本提供了全新的 API、更快的構建速度、重新設計的文檔，以及為 Astro 提供了獨特的新開發工具，以新穎有趣的方式增強本地開發環境！
Astro 是一個現代化的靜態站點生成器和前端框架，它具有獨特的設計理念：島嶼架構。它允許開發人員使用組件化的方式構建內容優先的網站，將各種技術棧（如 React、Vue、Svelte 等）的組件無縫集成到同一個項目中。2022 年，Astro 在 JavaScript 明星項目中排名第七，一年新增了 15k Star，目前已獲得了 37.4k Star！
了解更多：Astro，這個前端框架有點不一樣！
Astro 4.0 的更新亮點包括：
- Astro 開發工具欄
- 國際化（i18n）路由
- 增量內容緩存（實驗性功能）
- 全新的視圖過渡 API
- 重新設計的日志記錄
- 重新設計的文檔
可以直接訪問astro.new在瀏覽器中嘗試 Astro 4.0，或者在終端中運行以下命令來創建新項目：
npm create astro@latestAstro 開發工具欄
Astro 4.0 引入了開發工具欄，它可以增強和定制在本地瀏覽器中使用 Astro 的開發體驗。可以檢查頁面、捕捉棘手的無障礙問題，并使用自定義應用和第三方工具來擴展工具欄功能。
Astro 開發工具欄僅在開發過程中出現在瀏覽器中，不會出現在最終的生產構建中。該工具欄默認隱藏在頁面底部，直到需要它時才會顯示出來。將鼠標懸停在附近，工具欄將彈出并提供以下幾個不同的應用：
- Inspect：突出顯示頁面上的交互式 UI 組件島嶼。該工具欄應用旨在利用 Astro 獨特的島嶼架構。通過突出顯示頁面上的島嶼，可以幫助開發者了解哪些元素是交互式的，哪些是輕量級的靜態 HTML。然后，可以查看
props并單擊以直接在代碼編輯器中打開組件。 - Audit：運行一系列測試，對頁面進行常見無障礙問題的審核。通過此功能，在瀏覽器中即可立即捕捉到沒有
alt文本或配置錯誤的 ARIA 角色屬性的圖像，無需離開瀏覽器。 - Sentry：Astro 與 Sentry 合作設計了此工具欄的初始版本。Sentry 是 Web 應用監控平臺的領軍者，他們很高興能合作開發 Astro 的新獨立調試工具。
- Storyblok：Storyblok 是 Astro 官方的 CMS 合作伙伴，并作為其 Astro 集成的一部分，提供了一個工具欄應用。在 Astro 4.0 中，所有 Storyblok 用戶都應該看到一個新的應用，可以快速訪問 Storyblok + Astro 的文檔、教程和社區資源，未來還將推出更多 CMS 功能。
- 第三方應用：Astro 開發人員和第三方集成作者可以使用新的 Dev Toolbar API 來構建自己的嵌入式 JavaScript 應用以進行開發。這解鎖了一種全新的原始方法來構建開發工具，使功能如下：
- 直接在瀏覽器中顯示測試和 Linting 錯誤。
- 使用localtunnel將開發環境公開到公共互聯網。
- 輕松訪問外部工具，例如Squoosh圖像優化器。
- 內部團隊管理面板，以自動化常見任務，例如在開發過程中切換用戶帳戶。
在接下來的幾個月中，Astro 團隊將繼續通過引入新功能和第三方 API 來提高工具欄的性能。如果想在項目中禁用應用工具欄，可以更新配置文件，并運行astro preferences disable devToolbar --global 以在機器上全局禁用工具欄并適用于所有項目。
國際化（i18n）路由
作為 Web 開發人員，處理國際化通常意味著為代碼庫增加了許多額外的復雜性：路由、重定向、翻譯、相對鏈接處理等。
Astro 4.0 引入了新的國際化路由，幫助開發者以更少的復雜性構建全球可訪問的網站。利用新的 Astro 功能，如自動 i18n 路由和低級別輔助函數，處理 URL。
Astro 新內置的路由支持通過中央配置定義區域設置：
import { defineConfig } from "astro/config"
export default defineConfig({
i18n: {
defaultLocale: "en",
locales: ["en", "es", "pt-br"]
}
})可以通過以下方式定制國際化路由的行為：
- 回退策略：當特定語言環境下的內容不可用時，可以設置回退策略，以便在其他語言版本中提供相應的內容。
- 前綴行為：可以添加語言環境名稱到 URL 中作為前綴，以區分不同語言版本的頁面。
- 別名支持：可以為常見的語言環境和語言代碼設置別名，使其更易于識別和訪問。
對于使用服務端渲染（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，以獲得更快的構建速度。
全新的視圖過渡 API
Astro 3.0 推出了 View Transitions，以使用僅有服務端渲染的 HTML 和最少量的客戶端 JavaScript 構建交互式應用體驗。通過 Astro 中的 View Transitions，可以執行以下操作：
- 在不加載龐大的單頁應用的情況下，對不同頁面之間的導航進行動畫處理。
- 在頁面之間保持有狀態的 UI，例如視頻播放器和地圖。
- 自動在不同頁面之間變換共同元素。
- 使用滑動和淡入淡出效果賦予頁面更多個性。
自首次發布以來，Astro 不斷地改進支持，并在 Astro 4.0 版本中進一步完善了 View Transitions API 和用例：
- 表單：View Transitions 現在可以與靜態 HTML 表單和動態客戶端表單組件進行交互，觸發表單提交時的過渡效果，而不是鏈接導航。
- 預取：現在可以指定鏈接在懸停、點擊或頁面上可見時應預取，還可以在單個鏈接上啟用/禁用預取。
- 提供navigate()低級 JavaScript API，可以用于手動觸發導航。
- 完整的生命周期事件系統，可插入以自定義加載過程，甚至可以使用此功能將內置元素交換算法替換為自己的算法。
重新設計的日志記錄
Astro CLI 的日志記錄體驗改進主要包括以下內容：
- 移除不必要的日志記錄：以前，某些常見情況會導致重復記錄和其他不必要的日志，現在這些不必要的日志已經被移除了。
- 更簡潔的錯誤信息：現在，錯誤信息在終端中占用的行數更少，這意味著當出現問題時，在較小的終端上滾動的次數更少。
- 優化的堆棧跟蹤：默認情況下，錯誤不再包含無用的 Vite 運行時內部信息，從而提供了更清晰和精簡的堆棧跟蹤。
這些改進使得 Astro 4.0 版本中的dev和build命令更易于閱讀、解析和調試。
重新設計的文檔
Starlight 是 Astro 官方文檔模板，包括了在過去兩年中構建和管理大規模 Astro 文檔站點所收集的所有最佳實踐和模式。
現在，docs.astro.build 由 Starlight 驅動。
由于 Astro 文檔的貢獻，Starlight 現在具有了 Expressive Code 和新的 Algolia 插件等功能。還將推出新的組件，例如交互式文件樹。
