成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

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

譯文
作者： 李睿
開發 前端
Astro本質上是一個構建系統，采用一種更具發展前途的新方法來處理前端JavaScript。它與React、Svelte、Vue和其他流行的框架一起工作。

?譯者 | 李睿

審校 | 孫淑娟

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

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

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

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

孤島架構

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

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

采用Astro

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

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

清單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｝如何用于在標記中引用構建時變量。

在Astro中添加組件  

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

圖1.添加組件  

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

清單 2. Component1.astro

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

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

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

import Component from '@/Component.astro';

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

在Astro中使用框架  

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

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

在上面鏈接的Svelte演示中，首先要注意的是astro.config.mjs文件。該文件的內容類似于清單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在可以將Svelte文件直接導入Astro文件。例如，將這一行添加到/pages/index.astro：  

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

現在可以在Astro中使用Svelte中的Counter，如清單4所示。  

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

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

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

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

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

使用Astro微調部分水合作用  

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

Astro客戶端指令

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

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

構建時方法  

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

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

總體而言，盡管Astro更適合靜態網站，但它是一種有前途的創新方法，也是一個非?；钴S的項目，在GitHub上有將近16000顆星。

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

責任編輯：華軒 來源： 51CTO
JavaScriptAstro前端
相關推薦

2021-05-08 09:49:07

JavaScript延遲加載

2012-08-15 11:36:13

Hibernate

2009-09-25 10:47:25

Hibernate延遲

2009-09-24 11:41:46

Hibernate延遲

2009-06-17 11:18:02

Hibernate延遲

2009-09-28 09:40:28

Hibernate集合延遲加載

2012-06-05 10:22:45

jQuery

2023-06-29 07:48:35

異步加載JavaScript

2009-09-28 09:56:53

Hibernate屬性

2023-04-10 09:39:11

2009-07-02 09:39:37

Hibernate延遲

2015-08-25 10:28:38

前端圖片延遲加載

2009-09-25 10:17:21

Hibernate延遲

2020-12-25 10:28:41

JavaScript模塊module

2023-02-17 08:22:05

AndroidGlide

2021-08-01 07:58:58

Vue 加載組件

2009-09-09 09:48:43

Linq延遲加載

2011-06-08 14:22:51

延遲加載

2021-02-06 14:25:29

Java延遲加載代碼

2023-04-28 07:44:44

MyBatis查詢SQL
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 精品国产欧美一区二区 | 久草视频在线播放 | 国产男女猛烈无遮掩视频免费网站 | 色接久久 | 高清久久久 | 亚洲成人一级 | 超碰在线播 | 中文字幕日韩一区 | 国产精品久久久久久久久久久免费看 | 亚洲 欧美 激情 另类 校园 | 91麻豆产精品久久久久久夏晴子 | 久久成人免费视频 | 中文字幕日韩一区二区 | 亚洲欧洲日本国产 | 99久久婷婷国产综合精品电影 | 亭亭五月激情 | 丝袜久久 | 成人亚洲视频 | 欧美久久久久久 | 91精品国产91久久综合桃花 | 毛片一区二区三区 | 国产97人人超碰caoprom | 狠狠操狠狠干 | 欧美日韩国产一区二区三区 | 91av在线视频观看 | 亚洲精品视频免费观看 | 国产精品一区二区久久精品爱微奶 | 日韩欧美在线不卡 | 黄色福利 | 成人18亚洲xxoo | 欧美精品 在线观看 | 国产精品久久久久久久久免费樱桃 | 欧美久久天堂 | 一区二区免费在线观看 | 中文字幕免费在线 | 久久精品国产免费一区二区三区 | 国产精品久久久久永久免费观看 | 韩日在线观看视频 | 日韩免费| 成人视屏在线观看 | 成人欧美一区二区三区色青冈 |