12 月 5 日，現(xiàn)代化前端框架 Astro 4.0 版本正式發(fā)布！該版本提供了全新的 API、更快的構(gòu)建速度、重新設(shè)計(jì)的文檔，以及為 Astro 提供了獨(dú)特的新開(kāi)發(fā)工具，以新穎有趣的方式增強(qiáng)本地開(kāi)發(fā)環(huán)境！

Astro 是一個(gè)現(xiàn)代化的靜態(tài)站點(diǎn)生成器和前端框架，它具有獨(dú)特的設(shè)計(jì)理念：島嶼架構(gòu)。它允許開(kāi)發(fā)人員使用組件化的方式構(gòu)建內(nèi)容優(yōu)先的網(wǎng)站，將各種技術(shù)棧（如 React、Vue、Svelte 等）的組件無(wú)縫集成到同一個(gè)項(xiàng)目中。2022 年，Astro 在 JavaScript 明星項(xiàng)目中排名第七，一年新增了 15k Star，目前已獲得了 37.4k Star！

了解更多：Astro，這個(gè)前端框架有點(diǎn)不一樣！

Astro 4.0 的更新亮點(diǎn)包括：

• Astro 開(kāi)發(fā)工具欄
• 國(guó)際化（i18n）路由
• 增量?jī)?nèi)容緩存（實(shí)驗(yàn)性功能）
• 全新的視圖過(guò)渡 API
• 重新設(shè)計(jì)的日志記錄
• 重新設(shè)計(jì)的文檔

可以直接訪問(wèn)astro.new在瀏覽器中嘗試 Astro 4.0，或者在終端中運(yùn)行以下命令來(lái)創(chuàng)建新項(xiàng)目：

npm create astro@latest

Astro 開(kāi)發(fā)工具欄

Astro 4.0 引入了開(kāi)發(fā)工具欄，它可以增強(qiáng)和定制在本地瀏覽器中使用 Astro 的開(kāi)發(fā)體驗(yàn)?？梢詸z查頁(yè)面、捕捉棘手的無(wú)障礙問(wèn)題，并使用自定義應(yīng)用和第三方工具來(lái)擴(kuò)展工具欄功能。

Astro 開(kāi)發(fā)工具欄僅在開(kāi)發(fā)過(guò)程中出現(xiàn)在瀏覽器中，不會(huì)出現(xiàn)在最終的生產(chǎn)構(gòu)建中。該工具欄默認(rèn)隱藏在頁(yè)面底部，直到需要它時(shí)才會(huì)顯示出來(lái)。將鼠標(biāo)懸停在附近，工具欄將彈出并提供以下幾個(gè)不同的應(yīng)用：

• Inspect：突出顯示頁(yè)面上的交互式 UI 組件島嶼。該工具欄應(yīng)用旨在利用 Astro 獨(dú)特的島嶼架構(gòu)。通過(guò)突出顯示頁(yè)面上的島嶼，可以幫助開(kāi)發(fā)者了解哪些元素是交互式的，哪些是輕量級(jí)的靜態(tài) HTML。然后，可以查看props 并單擊以直接在代碼編輯器中打開(kāi)組件。
• Audit：運(yùn)行一系列測(cè)試，對(duì)頁(yè)面進(jìn)行常見(jiàn)無(wú)障礙問(wèn)題的審核。通過(guò)此功能，在瀏覽器中即可立即捕捉到?jīng)]有alt文本或配置錯(cuò)誤的 ARIA 角色屬性的圖像，無(wú)需離開(kāi)瀏覽器。
• Sentry：Astro 與 Sentry 合作設(shè)計(jì)了此工具欄的初始版本。Sentry 是 Web 應(yīng)用監(jiān)控平臺(tái)的領(lǐng)軍者，他們很高興能合作開(kāi)發(fā) Astro 的新獨(dú)立調(diào)試工具。
• Storyblok：Storyblok 是 Astro 官方的 CMS 合作伙伴，并作為其 Astro 集成的一部分，提供了一個(gè)工具欄應(yīng)用。在 Astro 4.0 中，所有 Storyblok 用戶都應(yīng)該看到一個(gè)新的應(yīng)用，可以快速訪問(wèn) Storyblok + Astro 的文檔、教程和社區(qū)資源，未來(lái)還將推出更多 CMS 功能。
• 第三方應(yīng)用：Astro 開(kāi)發(fā)人員和第三方集成作者可以使用新的 Dev Toolbar API 來(lái)構(gòu)建自己的嵌入式 JavaScript 應(yīng)用以進(jìn)行開(kāi)發(fā)。這解鎖了一種全新的原始方法來(lái)構(gòu)建開(kāi)發(fā)工具，使功能如下：

• 直接在瀏覽器中顯示測(cè)試和 Linting 錯(cuò)誤。
• 使用localtunnel將開(kāi)發(fā)環(huán)境公開(kāi)到公共互聯(lián)網(wǎng)。
• 輕松訪問(wèn)外部工具，例如Squoosh圖像優(yōu)化器。
• 內(nèi)部團(tuán)隊(duì)管理面板，以自動(dòng)化常見(jiàn)任務(wù)，例如在開(kāi)發(fā)過(guò)程中切換用戶帳戶。

在接下來(lái)的幾個(gè)月中，Astro 團(tuán)隊(duì)將繼續(xù)通過(guò)引入新功能和第三方 API 來(lái)提高工具欄的性能。如果想在項(xiàng)目中禁用應(yīng)用工具欄，可以更新配置文件，并運(yùn)行astro preferences disable devToolbar --global 以在機(jī)器上全局禁用工具欄并適用于所有項(xiàng)目。

國(guó)際化（i18n）路由

作為 Web 開(kāi)發(fā)人員，處理國(guó)際化通常意味著為代碼庫(kù)增加了許多額外的復(fù)雜性：路由、重定向、翻譯、相對(duì)鏈接處理等。

Astro 4.0 引入了新的國(guó)際化路由，幫助開(kāi)發(fā)者以更少的復(fù)雜性構(gòu)建全球可訪問(wèn)的網(wǎng)站。利用新的 Astro 功能，如自動(dòng) i18n 路由和低級(jí)別輔助函數(shù)，處理 URL。

Astro 新內(nèi)置的路由支持通過(guò)中央配置定義區(qū)域設(shè)置：

import { defineConfig } from "astro/config"
export default defineConfig({
  i18n: {
    defaultLocale: "en",
    locales: ["en", "es", "pt-br"]
  }
})

可以通過(guò)以下方式定制國(guó)際化路由的行為：

• 回退策略：當(dāng)特定語(yǔ)言環(huán)境下的內(nèi)容不可用時(shí)，可以設(shè)置回退策略，以便在其他語(yǔ)言版本中提供相應(yīng)的內(nèi)容。
• 前綴行為：可以添加語(yǔ)言環(huán)境名稱到 URL 中作為前綴，以區(qū)分不同語(yǔ)言版本的頁(yè)面。
• 別名支持：可以為常見(jiàn)的語(yǔ)言環(huán)境和語(yǔ)言代碼設(shè)置別名，使其更易于識(shí)別和訪問(wèn)。

對(duì)于使用服務(wù)端渲染（SSR）的 'server' 構(gòu)建，Astro 能夠自動(dòng)檢測(cè)用戶的首選語(yǔ)言，這樣就可以進(jìn)一步定制內(nèi)容、添加重定向或者進(jìn)一步定制路由處理。

國(guó)際化路由支持最初是作為實(shí)驗(yàn)性功能添加到 Astro 3.5 中的，如今，在 Astro 4.0 中已經(jīng)成為穩(wěn)定功能。

增量?jī)?nèi)容緩存（實(shí)驗(yàn)性功能）

Astro 4.0 引入了增量?jī)?nèi)容緩存作為實(shí)驗(yàn)性新功能，可顯著加快大型網(wǎng)站的構(gòu)建性能。

隨著時(shí)間的推移，代碼庫(kù)不斷增長(zhǎng)，構(gòu)建網(wǎng)站的時(shí)間會(huì)越來(lái)越長(zhǎng)。靜態(tài)網(wǎng)站由于在每次構(gòu)建時(shí)重新生成相同的頁(yè)面，這個(gè)問(wèn)題更加嚴(yán)重。在 Astro 4.0 中，引入了緩存來(lái)幫助減少在astro build命令中進(jìn)行的重復(fù)和不必要的工作量。

在 Astro 官方文檔項(xiàng)目上啟用內(nèi)容緩存后，astro build中相關(guān)步驟的時(shí)間從 133.20 秒降低到 10.46 秒，速度提高了約 92%。整個(gè)構(gòu)建時(shí)間從 4 分鐘 58 秒減少到略超過(guò) 60 秒，總體構(gòu)建時(shí)間減少了 80%。在其他真實(shí)場(chǎng)景中也看到了類似的結(jié)果報(bào)告。

增量?jī)?nèi)容緩存與Content Collections API 相關(guān)聯(lián)。由于 Astro 擁有訪問(wèn)和管理集合內(nèi)內(nèi)容的 API，因此構(gòu)建可以使用內(nèi)部構(gòu)建清單安全地跟蹤集合內(nèi)的更改。Astro 可以在每次構(gòu)建時(shí)檢查緩存，并重復(fù)使用未更改的內(nèi)容項(xiàng)。

實(shí)驗(yàn)性支持增量?jī)?nèi)容緩存最初是在 Astro 3.5 中以“Content Collections Build Cache”為名稱引入的。隨著繼續(xù)完善緩存行為，此功能在 4.0 中仍然是實(shí)驗(yàn)性的。如果想進(jìn)行實(shí)驗(yàn)，可以在項(xiàng)目配置中啟用experimental.contentCollectionCache，以獲得更快的構(gòu)建速度。

全新的視圖過(guò)渡 API

Astro 3.0 推出了 View Transitions，以使用僅有服務(wù)端渲染的 HTML 和最少量的客戶端 JavaScript 構(gòu)建交互式應(yīng)用體驗(yàn)。通過(guò) Astro 中的 View Transitions，可以執(zhí)行以下操作：

• 在不加載龐大的單頁(yè)應(yīng)用的情況下，對(duì)不同頁(yè)面之間的導(dǎo)航進(jìn)行動(dòng)畫(huà)處理。
• 在頁(yè)面之間保持有狀態(tài)的 UI，例如視頻播放器和地圖。
• 自動(dòng)在不同頁(yè)面之間變換共同元素。
• 使用滑動(dòng)和淡入淡出效果賦予頁(yè)面更多個(gè)性。

自首次發(fā)布以來(lái)，Astro 不斷地改進(jìn)支持，并在 Astro 4.0 版本中進(jìn)一步完善了 View Transitions API 和用例：

• 表單：View Transitions 現(xiàn)在可以與靜態(tài) HTML 表單和動(dòng)態(tài)客戶端表單組件進(jìn)行交互，觸發(fā)表單提交時(shí)的過(guò)渡效果，而不是鏈接導(dǎo)航。
• 預(yù)取：現(xiàn)在可以指定鏈接在懸停、點(diǎn)擊或頁(yè)面上可見(jiàn)時(shí)應(yīng)預(yù)取，還可以在單個(gè)鏈接上啟用/禁用預(yù)取。
• 提供navigate()低級(jí) JavaScript API，可以用于手動(dòng)觸發(fā)導(dǎo)航。
• 完整的生命周期事件系統(tǒng)，可插入以自定義加載過(guò)程，甚至可以使用此功能將內(nèi)置元素交換算法替換為自己的算法。

重新設(shè)計(jì)的日志記錄

Astro CLI 的日志記錄體驗(yàn)改進(jìn)主要包括以下內(nèi)容：

• 移除不必要的日志記錄：以前，某些常見(jiàn)情況會(huì)導(dǎo)致重復(fù)記錄和其他不必要的日志，現(xiàn)在這些不必要的日志已經(jīng)被移除了。
• 更簡(jiǎn)潔的錯(cuò)誤信息：現(xiàn)在，錯(cuò)誤信息在終端中占用的行數(shù)更少，這意味著當(dāng)出現(xiàn)問(wèn)題時(shí)，在較小的終端上滾動(dòng)的次數(shù)更少。
• 優(yōu)化的堆棧跟蹤：默認(rèn)情況下，錯(cuò)誤不再包含無(wú)用的 Vite 運(yùn)行時(shí)內(nèi)部信息，從而提供了更清晰和精簡(jiǎn)的堆棧跟蹤。

這些改進(jìn)使得 Astro 4.0 版本中的dev和build命令更易于閱讀、解析和調(diào)試。

重新設(shè)計(jì)的文檔

Starlight 是 Astro 官方文檔模板，包括了在過(guò)去兩年中構(gòu)建和管理大規(guī)模 Astro 文檔站點(diǎn)所收集的所有最佳實(shí)踐和模式。

現(xiàn)在，docs.astro.build 由 Starlight 驅(qū)動(dòng)。

由于 Astro 文檔的貢獻(xiàn)，Starlight 現(xiàn)在具有了 Expressive Code 和新的 Algolia 插件等功能。還將推出新的組件，例如交互式文件樹(shù)。