Astro簡介：智能的JavaScript延遲加載

作者：李睿 2022-12-02 08:00:00

Astro本質(zhì)上是一個構(gòu)建系統(tǒng)，采用一種更具發(fā)展前途的新方法來處理前端JavaScript。它與React、Svelte、Vue和其他流行的框架一起工作。

?譯者 | 李睿

審校 | 孫淑娟

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

已經(jīng)有一些嘗試通過避免昂貴的預取和引導來提高性能，這些操作已經(jīng)影響了類似于React的框架。

Astro采用了一種有趣而新穎的方法。它是一個構(gòu)建系統(tǒng)，可以讓用戶使用任何想要的框架（React、Svelte、Vue等），然后找到最適合使用JavaScript延遲加載的地方。可以將其視為捆綁時應用于應用程序的一種智能代碼拆分。

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

孤島架構(gòu)

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

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

采用Astro

可以通過使用在線沙盒來熟悉Astro。點擊這個鏈接（https://astro.build/play）打開它。

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

清單1.簡單的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');
---
 <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Astro Playground</title>
    <style>
      header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 15vh;
        font-family: Arial;
      }
      .note {
        margin: 0;
        padding: 1rem;
        border-radius: 8px;
        background: #E4E5E6;
        border: 1px solid #BBB;
      }
    </style>
  </head>
  <body>
    <header>
      <img width="60" height="80" src="https://bestofjs.org/logos/astro.svg" alt="Astro logo">
      <h1>Hello, Astro!</h1>
      <p class="note">
        <strong>RENDERED AT:</strong><br/>
        {builtAtFormatted}
      </p>
    </header>
  </body>
</html>

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

在Astro中添加組件

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

圖1.添加組件

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

清單 2. Component1.astro

---
const name = "Component"
---
<h1>Hello {name}</h1>

這里又有一個簡單的變量賦值和顯示，可以利用主頁中的組件。

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

import Component from '@/Component.astro';

可以通過將<Component/>插入標記來使用這一組件。執(zhí)行這個操作，將在預覽窗口中看到子組件的輸出。

在Astro中使用框架

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

如果打開這個鏈接，將看到一個運行Svelte組件的Astro應用程序（https://stackblitz.com/edit/github-5jbyfh?file=astro.config.mjs中的示例演示了幾個顯示引擎）。

在上面鏈接的Svelte演示中，首先要注意的是astro.config.mjs文件。該文件的內(nè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組件。現(xiàn)在可以將Svelte文件直接導入Astro文件。例如，將這一行添加到/pages/index.astro：

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

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

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

<Counter client:visible>
   <h1>Hello, Svelte!</h1>
   </Counter>

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

Astro支持Svelte、React、Vue、Solid、Preact和Lit。使用它們的過程就像使用Svelte一樣。事實上，可以啟用多個顯示引擎并在Astro應用程序中并排使用它們。

除了集成之外，Astro還提供了幾個主題和啟動器。

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

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

Astro客戶端指令

Astro的客戶端指令控制頁面上組件的水合方式。

<MyComponent client:load/>：在頁面加載時水合組件。  
<MyComponent client:idle/>：一旦主線程空閑（使用requestIdleCallback()），就會水合組件。  
<MyComponent client:visible/>：元素進入視口后立即水合組件（使用Intersection Observer）。適用于頁面下方的內(nèi)容。
<MyComponent client:media={QUERY}/>：一旦瀏覽器匹配給定的媒體查詢（使用matchMedia），就會水合組件。對于側(cè)邊欄切換或僅應在移動或桌面設(shè)備上顯示的其他元素很有用。  
<MyComponent client:only={string}/>：在頁面加載時水合組件，僅在客戶端上呈現(xiàn)。將組件的框架作為字符串（例如，“svelte”）。

構(gòu)建時方法

由于Astro本質(zhì)上是一個構(gòu)建工具，它可以完全控制最終發(fā)送到用戶瀏覽器的內(nèi)容。這意味著除了使用延遲加載的JavaScrip做一些事情之外，Astro還可以處理它如何交付其他資產(chǎn)，例如CSS。

此外，Astro的目標是將盡可能多的JavaScript提取為直接的HTML，這意味著更少的網(wǎng)絡(luò)數(shù)據(jù)、更少的瀏覽器流失和更快的交互時間。

總體而言，盡管Astro更適合靜態(tài)網(wǎng)站，但它是一種有前途的創(chuàng)新方法，也是一個非常活躍的項目，在GitHub上有將近16000顆星。

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

責任編輯：華軒來源： 51CTO

国产精品电影_久久视频免费_欧美日韩国产激情_成年人视频免费在线播放_日本久久亚洲电影_久久都是精品_66av99_九色精品美女在线_蜜臀a∨国产成人精品_冲田杏梨av在线_欧美精品在线一区二区三区_麻豆mv在线看