Astro簡介：智能的JavaScript延遲加載
譯文?譯者 | 李睿
審校 | 孫淑娟
Astro是當(dāng)前JavaScript熱潮中的一種新方法：從響應(yīng)式前端獲得更多性能。它是由創(chuàng)建Snowpack構(gòu)建工具的同一團(tuán)隊(duì)開發(fā)的。
已經(jīng)有一些嘗試通過避免昂貴的預(yù)取和引導(dǎo)來提高性能，這些操作已經(jīng)影響了類似于React的框架。
Astro采用了一種有趣而新穎的方法。它是一個(gè)構(gòu)建系統(tǒng)，可以讓用戶使用任何想要的框架（React、Svelte、Vue等），然后找到最適合使用JavaScript延遲加載的地方?？梢詫⑵湟暈槔墪r(shí)應(yīng)用于應(yīng)用程序的一種智能代碼拆分。
因此，用戶可以使用熟悉的框架，但也可以獲得潛在的巨大性能優(yōu)勢。
孤島架構(gòu)
Astro提出的Web架構(gòu)有時(shí)被稱為孤島架構(gòu)。其核心思想是這些孤島是交互式、依賴于JavaScript的組件，被純HTML/CSS標(biāo)記包圍。
通過以這種方式分割應(yīng)用程序，可以將所有HTML直接發(fā)送到瀏覽器，因此用戶可以與之交互，而依賴于JavaScript的部分只能在需要時(shí)加載。甚至可以告訴Astro推遲JavaScript，直到組件對(duì)用戶可見為止。
采用Astro
可以通過使用在線沙盒來熟悉Astro。點(diǎn)擊這個(gè)鏈接（https://astro.build/play）打開它。
這個(gè)鏈接將顯示名稱為Page.astro的簡單頁面，并帶有時(shí)間戳。需要注意頁面（清單1）是如何分成兩個(gè)部分的。第一部分由第一個(gè)點(diǎn)劃線(---)表示，包含將在構(gòu)建時(shí)而不是運(yùn)行時(shí)在服務(wù)器上執(zhí)行的代碼。第二部分由第二個(gè)點(diǎn)劃線表示，包含要在運(yùn)行時(shí)交付的標(biāo)記。
清單1.簡單的Astro沙箱
需要注意｛builtAtFormatter｝如何用于在標(biāo)記中引用構(gòu)建時(shí)變量。
在Astro中添加組件
現(xiàn)在添加一個(gè)組件。單擊頂部文件欄中的加號(hào)圖標(biāo)，如圖1所示。
圖1.添加組件
用戶的新組件將收到一個(gè)默認(rèn)名稱(Component1.astro)和內(nèi)容，如清單2所示。
清單 2. Component1.astro
這里又有一個(gè)簡單的變量賦值和顯示，可以利用主頁中的組件。
返回到Page.astro。需要注意的是，系統(tǒng)已將導(dǎo)入插入到JavaScript段中：
可以通過將<Component/>插入標(biāo)記來使用這一組件。執(zhí)行這個(gè)操作，將在預(yù)覽窗口中看到子組件的輸出。
在Astro中使用框架
Astro的超級(jí)能力是它對(duì)各種其他框架的支持。它通過在構(gòu)建過程中使用渲染引擎來實(shí)現(xiàn)這一點(diǎn)，并將它們編譯成組件“孤島”實(shí)現(xiàn)這一點(diǎn)。以下了解下這是如何工作的。
如果打開這個(gè)鏈接，將看到一個(gè)運(yùn)行Svelte組件的Astro應(yīng)用程序（https://stackblitz.com/edit/github-5jbyfh?file=astro.config.mjs中的示例演示了幾個(gè)顯示引擎）。
在上面鏈接的Svelte演示中，首先要注意的是astro.config.mjs文件。該文件的內(nèi)容類似于清單3。
清單3.啟用Svelte渲染器
清單3展示了如何啟用Svelte，因此引擎將理解Svelte組件?，F(xiàn)在可以將Svelte文件直接導(dǎo)入Astro文件。例如，將這一行添加到/pages/index.astro：
現(xiàn)在可以在Astro中使用Svelte中的Counter，如清單4所示。
清單4.在Astro中使用Svelte組件
盡管這是Svelte的典型用法，但需要注意Counter上有一個(gè)特定于Astro的屬性：client:visible。這意味著組件不會(huì)被加載到客戶端，除非它在頁面上可見。因此，它以最少的努力實(shí)現(xiàn)了一些細(xì)粒度的延遲加載。
Astro支持Svelte、React、Vue、Solid、Preact和Lit。使用它們的過程就像使用Svelte一樣。事實(shí)上，可以啟用多個(gè)顯示引擎并在Astro應(yīng)用程序中并排使用它們。
除了集成之外，Astro還提供了幾個(gè)主題和啟動(dòng)器。
使用Astro微調(diào)部分水合作用
人們已經(jīng)看到了client:visible指令的作用。還有其他可用的。在每種情況下，該指令首先告訴Astro在客戶端上呈現(xiàn)組件及其附帶的JavaScript，而不是執(zhí)行服務(wù)器顯示并發(fā)送HTML。然后，它會(huì)告訴Astro如何為組件進(jìn)行水合。
Astro客戶端指令
Astro的客戶端指令控制頁面上組件的水合方式。
構(gòu)建時(shí)方法
由于Astro本質(zhì)上是一個(gè)構(gòu)建工具，它可以完全控制最終發(fā)送到用戶瀏覽器的內(nèi)容。這意味著除了使用延遲加載的JavaScrip做一些事情之外，Astro還可以處理它如何交付其他資產(chǎn)，例如CSS。
此外，Astro的目標(biāo)是將盡可能多的JavaScript提取為直接的HTML，這意味著更少的網(wǎng)絡(luò)數(shù)據(jù)、更少的瀏覽器流失和更快的交互時(shí)間。
總體而言，盡管Astro更適合靜態(tài)網(wǎng)站，但它是一種有前途的創(chuàng)新方法，也是一個(gè)非常活躍的項(xiàng)目，在GitHub上有將近16000顆星。
原文標(biāo)題：??Intro to Astro: Clever lazy loading for JavaScript???，作者：Matthew Tyson?
