5 kipróbálható új szolgáltatás az Astro 2.5-ben

Az AstroJS egy fantasztikus JavaScript-alapú eszköz, amelyet szupergyors statikus webhelyek létrehozására használnak. Lehetővé teszi webhelyek létrehozását több JavaScript-keretrendszer használatával, mint például a React, a Vue és a Svelte. Az Astro 2.5 teljesen új funkciókat kínál, amelyek közül néhányat itt tárgyalunk.

1. Adatgyűjtések

Az Astro 2.5 mostantól támogatja a JSON és a YAML gyűjteményekben való tárolását. Az új típusú: 'data' tulajdonság lehetővé teszi ezt a funkciót. Ennek demonstrálásához hozzon létre egy 'writers' adatgyűjteményt az src/content mappában, ahol JSON vagy YAML fájlok hozzáadhatók.

Ezután állítsa be a gyűjteményeket az src/content/config.ts fájlban a defineCollection és z közművek től astro: tartalom modult, és állítsa be a típust adatra.

import { z, defineCollection } tól től"astro: tartalom";
const writers = defineCollection({
típus: "adat",
séma: z.tárgy({ név: z.húr() }),
});

Végül exportálja a gyűjteményobjektumot a gyűjtemények regisztrálásához.

exportconst gyűjtemények = {írók:writers}

2. HTML kicsinyítés

Az Astro 2.5 bevezeti a tömörítési HTML opciót, amely eltávolítja az összes szóközt (és sortörést) a HTML-ből. A komponenseket csak egyszer tömöríti az Astro fordító, majd az összeállítás során. Ez a teljesítmény költségeinek csökkentése érdekében történik.

Ennek a lehetőségnek a engedélyezése a projektben egyszerű. Csak adja hozzá a következő sorokat a konfigurációs fájlhoz. A HTML Minification csak .astro fájlformátumban írt összetevőkkel működik.

exportalapértelmezettdefineConfig({tömörítse a HTML-t:igaz})

3. Párhuzamos renderelés

A komponensek párhuzamos megjelenítése az Astro régóta várt funkciója. Azokban az esetekben, amikor a különböző részfákban lévő utódkomponensek lekérik az adatokat, az Astro 2.5 az adatok párhuzamos lekérésével javítja a betöltési időt.

Ez lehetővé teszi a fában lejjebb lévő komponensek megjelenítését anélkül, hogy a fában magasabban lévő adatlekérő összetevő blokkolná. Jelenleg a párhuzamos renderelés nem működik megfelelően array.map aszinkron töredékek.

Az Astro 2.5 egy teljesen új kísérleti funkciót is kínál, amelyekről alább olvashat.

4. Hibrid renderelés

Az Astro 2.5 mostantól lehetővé teszi egy új szerver kimeneti beállítás megadását a konfigurációs fájlban, amely felülírja az SSR alapértelmezett elő-megjelenítési viselkedését.

A hibrid renderelés előnyeinek kihasználásához állítsa be hibridKimenet igazra a konfiguráció kísérleti részében, és adjon hozzá egy adaptert.

Ezzel alapértelmezés szerint a teljes webhelyet előre megjeleníti, de letilthatja ezt a viselkedést a következő beállításával előrenderelés bármely útvonal vagy oldal exportálása false formátumba:

exportconst előrender = hamis;

5. Egyéni ügyfélirányelvek

Az Astro 2.5 bevezeti az addClientDirective API-t az egyedi ügyféloldali összetevők hidratálásának vezérléséhez egyéni használatával ügyfél:* irányelveket.

A funkció használatához válassza az Engedélyezést kísérleti.customClientDirectives a konfigurációs fájlban, és tartsa minimálisan az irányelv belépési pontjait, hogy elkerülje az összetevők hidratálására gyakorolt ​​negatív hatásokat.

Típusfüggvény ClientDirective exportálni kell az ügyfélirányelv fájlból. Például a következő kód hidratálja az összetevőt az ablakra történő első kattintáskor.

import { ClientDirective } tól től"asztro";
const clickDirective: ClientDirective = (terhelés, opts, el) => {
ablak.addEventListener(
"kattintás",
async () => {
const hidratál = várja Betöltés();
várja hidrát();
 },
 { egyszer: igaz }
 );
};
exportalapértelmezett clickDirective;

Most kliens: kattintson teljes típustámogatással használható a komponenseiben.

Az Astro telepítése

Az Astro egy Command Line Interface (CLI) nevű parancssori interfészt biztosít astro hogy elinduljon. Kell, hogy legyen NodeJS 16+ és npm telepítve a gépére.

npm astro létrehozása@legújabb

Ezzel a semmiből egy új Astro projektet építhet fel. Kövesse a képernyőn megjelenő utasításokat a dolgok beállításához (ha nem biztos abban, hogy mit válasszon, csak használja az ajánlott lehetőségeket). Következő, CD a projekt mappába, majd futtassa:

npm futás dev

Hozzáadhat olyan keretrendszereket, mint a React, a segítségével astro add. Ha minden megfelelően van telepítve, megnyithatja helyi házigazda: 3000 a gépén, és látnia kell az "Üdvözöljük az Astro-ban" üzenetet.

Ha nem szereti az NPM-et, választhat mást JavaScript csomagkezelők mint a fonal és a PNPM.

A fejlesztői élmény fokozása az Astro segítségével

Az olyan átfogó keretrendszerek, mint az Astro, a lehető legsimábbá teszik a gyors webhelyek fejlesztését. Fantasztikus, UI-agnosztikus természete azt jelenti, hogy problémamentesen dolgozhat bármilyen népszerű JavaScript-keretrendszerrel, amelyet választott.