?譯者 | 李睿

成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供溫江網(wǎng)站建設(shè)、溫江做網(wǎng)站、溫江網(wǎng)站設(shè)計(jì)、溫江網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、溫江企業(yè)網(wǎng)站模板建站服務(wù)，十載溫江做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

審校 | 孫淑娟

Astro是當(dāng)前JavaScript熱潮中的一種新方法：從響應(yīng)式前端獲得更多性能。它是由創(chuàng)建Snowpack構(gòu)建工具的同一團(tuán)隊(duì)開(kāi)發(fā)的。

已經(jīng)有一些嘗試通過(guò)避免昂貴的預(yù)取和引導(dǎo)來(lái)提高性能，這些操作已經(jīng)影響了類(lèi)似于React的框架。

Astro采用了一種有趣而新穎的方法。它是一個(gè)構(gòu)建系統(tǒng)，可以讓用戶(hù)使用任何想要的框架（React、Svelte、Vue等），然后找到最適合使用JavaScript延遲加載的地方?？梢詫⑵湟暈槔墪r(shí)應(yīng)用于應(yīng)用程序的一種智能代碼拆分。

因此，用戶(hù)可以使用熟悉的框架，但也可以獲得潛在的巨大性能優(yōu)勢(shì)。

孤島架構(gòu)

Astro提出的Web架構(gòu)有時(shí)被稱(chēng)為孤島架構(gòu)。其核心思想是這些孤島是交互式、依賴(lài)于JavaScript的組件，被純HTML/CSS標(biāo)記包圍。

通過(guò)以這種方式分割應(yīng)用程序，可以將所有HTML直接發(fā)送到瀏覽器，因此用戶(hù)可以與之交互，而依賴(lài)于JavaScript的部分只能在需要時(shí)加載。甚至可以告訴Astro推遲JavaScript，直到組件對(duì)用戶(hù)可見(jiàn)為止。

采用Astro

可以通過(guò)使用在線(xiàn)沙盒來(lái)熟悉Astro。點(diǎn)擊這個(gè)鏈接（https://astro.build/play）打開(kāi)它。

這個(gè)鏈接將顯示名稱(chēng)為Page.astro的簡(jiǎn)單頁(yè)面，并帶有時(shí)間戳。需要注意頁(yè)面（清單1）是如何分成兩個(gè)部分的。第一部分由第一個(gè)點(diǎn)劃線(xiàn)(---)表示，包含將在構(gòu)建時(shí)而不是運(yùn)行時(shí)在服務(wù)器上執(zhí)行的代碼。第二部分由第二個(gè)點(diǎn)劃線(xiàn)表示，包含要在運(yùn)行時(shí)交付的標(biāo)記。

清單1.簡(jiǎn)單的Astro沙箱

---
import {format} from 'date-fns';
 // Welcome to Astro!
 // Write JavaScript & TypeScript here, in the "component script."
 // This will run during the build, but never in the final output.
 // Use these variables in the HTML template below.
 //
 // Full Syntax:
 // https://docs.astro.build/core-concepts/astro-components/

 const builtAt: Date = new Date();
 const builtAtFormatted = format(builtAt, 'MMMM dd, yyyy -- H:mm:ss.SSS');
---
 
  
    
    
    
  
  
    

      
      
Hello, Astro!

      

        RENDERED AT:

        {builtAtFormatted}
      

    

  

需要注意｛builtAtFormatter｝如何用于在標(biāo)記中引用構(gòu)建時(shí)變量。

在Astro中添加組件  

現(xiàn)在添加一個(gè)組件。單擊頂部文件欄中的加號(hào)圖標(biāo)，如圖1所示。

圖1.添加組件

用戶(hù)的新組件將收到一個(gè)默認(rèn)名稱(chēng)(Component1.astro)和內(nèi)容，如清單2所示。

清單 2. Component1.astro

---
const name = "Component"
---
Hello {name}

這里又有一個(gè)簡(jiǎn)單的變量賦值和顯示，可以利用主頁(yè)中的組件。

返回到Page.astro。需要注意的是，系統(tǒng)已將導(dǎo)入插入到JavaScript段中：

import Component from '@/Component.astro';

 可以通過(guò)將插入標(biāo)記來(lái)使用這一組件。執(zhí)行這個(gè)操作，將在預(yù)覽窗口中看到子組件的輸出。

在Astro中使用框架  

Astro的超級(jí)能力是它對(duì)各種其他框架的支持。它通過(guò)在構(gòu)建過(guò)程中使用渲染引擎來(lái)實(shí)現(xiàn)這一點(diǎn)，并將它們編譯成組件“孤島”實(shí)現(xiàn)這一點(diǎn)。以下了解下這是如何工作的。

如果打開(kāi)這個(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)容類(lèi)似于清單3。

清單3.啟用Svelte渲染器

export default /** @type {import('astro').AstroUserConfig} */ ({
  // Enable the Svelte renderer to support Svelte components.
  renderers: ['@astrojs/renderer-svelte'],
  });

清單3展示了如何啟用Svelte，因此引擎將理解Svelte組件?，F(xiàn)在可以將Svelte文件直接導(dǎo)入Astro文件。例如，將這一行添加到/pages/index.astro：

import Counter from '../components/Counter.svelte

現(xiàn)在可以在Astro中使用Svelte中的Counter，如清單4所示。

清單4.在Astro中使用Svelte組件  

   
Hello, Svelte!

   

盡管這是Svelte的典型用法，但需要注意Counter上有一個(gè)特定于Astro的屬性：client:visible。這意味著組件不會(huì)被加載到客戶(hù)端，除非它在頁(yè)面上可見(jiàn)。因此，它以最少的努力實(shí)現(xiàn)了一些細(xì)粒度的延遲加載。

Astro支持Svelte、React、Vue、Solid、Preact和Lit。使用它們的過(guò)程就像使用Svelte一樣。事實(shí)上，可以啟用多個(gè)顯示引擎并在Astro應(yīng)用程序中并排使用它們。

除了集成之外，Astro還提供了幾個(gè)主題和啟動(dòng)器。

使用Astro微調(diào)部分水合作用  

人們已經(jīng)看到了client:visible指令的作用。還有其他可用的。在每種情況下，該指令首先告訴Astro在客戶(hù)端上呈現(xiàn)組件及其附帶的JavaScript，而不是執(zhí)行服務(wù)器顯示并發(fā)送HTML。然后，它會(huì)告訴Astro如何為組件進(jìn)行水合。

Astro客戶(hù)端指令

Astro的客戶(hù)端指令控制頁(yè)面上組件的水合方式。

：在頁(yè)面加載時(shí)水合組件。  
：一旦主線(xiàn)程空閑（使用requestIdleCallback()），就會(huì)水合組件。  
：元素進(jìn)入視口后立即水合組件（使用Intersection Observer）。適用于頁(yè)面下方的內(nèi)容。
：一旦瀏覽器匹配給定的媒體查詢(xún)（使用matchMedia），就會(huì)水合組件。對(duì)于側(cè)邊欄切換或僅應(yīng)在移動(dòng)或桌面設(shè)備上顯示的其他元素很有用。  
：在頁(yè)面加載時(shí)水合組件，僅在客戶(hù)端上呈現(xiàn)。將組件的框架作為字符串（例如，“svelte”）。

構(gòu)建時(shí)方法  

由于Astro本質(zhì)上是一個(gè)構(gòu)建工具，它可以完全控制最終發(fā)送到用戶(hù)瀏覽器的內(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è)非?；钴S的項(xiàng)目，在GitHub上有將近16000顆星。

原文標(biāo)題：??Intro to Astro: Clever lazy loading for JavaScript???，作者：Matthew Tyson?

當(dāng)前名稱(chēng)：Astro簡(jiǎn)介：智能的JavaScript延遲加載
當(dāng)前網(wǎng)址：http://m.5511xx.com/article/djjcgoe.html