自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Astro簡(jiǎn)介：智能的JavaScript延遲加載

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

?譯者 | 李睿

審校 | 孫淑娟

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)影響了類似于React的框架。

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

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

孤島架構(gòu)

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

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

采用Astro

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

這個(gè)鏈接將顯示名稱為Page.astro的簡(jiǎn)單頁(yè)面，并帶有時(shí)間戳。需要注意頁(yè)面（清單1）是如何分成兩個(gè)部分的。第一部分由第一個(gè)點(diǎn)劃線(---)表示，包含將在構(gòu)建時(shí)而不是運(yùn)行時(shí)在服務(wù)器上執(zhí)行的代碼。第二部分由第二個(gè)點(diǎ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');
---
 <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｝如何用于在標(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

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

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

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

import Component from '@/Component.astro';

 可以通過(guò)將<Component/>插入標(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)容類似于清單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組件  

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

盡管這是Svelte的典型用法，但需要注意Counter上有一個(gè)特定于Astro的屬性：client:visible。這意味著組件不會(huì)被加載到客戶端，除非它在頁(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在客戶端上呈現(xiàn)組件及其附帶的JavaScript，而不是執(zhí)行服務(wù)器顯示并發(fā)送HTML。然后，它會(huì)告訴Astro如何為組件進(jìn)行水合。  

Astro客戶端指令

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

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

構(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è)非?；钴S的項(xiàng)目，在GitHub上有將近16000顆星。

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

責(zé)任編輯：華軒 來(lái)源： 51CTO
JavaScriptAstro前端
相關(guān)推薦

2021-05-08 09:49:07

JavaScript延遲加載

2012-08-15 11:36:13

Hibernate

2009-06-17 11:18:02

Hibernate延遲

2009-09-24 11:41:46

Hibernate延遲

2009-09-25 10:47:25

Hibernate延遲

2023-06-29 07:48:35

異步加載JavaScript

2012-06-05 10:22:45

jQuery

2009-09-28 09:40:28

Hibernate集合延遲加載

2009-09-28 09:56:53

Hibernate屬性

2009-07-02 09:39:37

Hibernate延遲

2009-09-25 10:17:21

Hibernate延遲

2015-08-25 10:28:38

前端圖片延遲加載

2023-02-17 08:22:05

AndroidGlide

2020-12-25 10:28:41

JavaScript模塊module

2023-04-10 09:39:11

2009-09-09 09:48:43

Linq延遲加載

2011-06-08 14:22:51

延遲加載

2021-08-01 07:58:58

Vue 加載組件

2023-04-28 07:44:44

MyBatis查詢SQL

2021-02-06 14:25:29

Java延遲加載代碼
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)