5 nových funkcií na vyskúšanie v Astro 2.5

AstroJS je fantastický nástroj založený na JavaScripte, ktorý sa používa na vytváranie super rýchlych statických webových stránok. Umožňuje vám vytvárať webové stránky pomocou viacerých rámcov JavaScript, ako sú React, Vue a Svelte. Astro 2.5 prináša úplne novú sadu funkcií, z ktorých niektoré tu budú zahrnuté.

1. Zbery údajov

Astro 2.5 teraz podporuje ukladanie JSON a YAML do kolekcií. Nová vlastnosť typu: 'data' umožňuje túto funkciu. Aby ste to demonštrovali, vytvorte kolekciu údajov „writers“ v priečinku src/content, kde JSON alebo YAML súbory je možné pridať.

Ďalej nakonfigurujte kolekcie v src/content/config.ts pomocou súboru defineCollection a z inžinierske siete od astro: obsah modul a nastavenie typu na data.

importovať { z, defineCollection } od"astro: obsah";
konšt spisovatelia = defineCollection({
typu: "údaje",
schému: z.predmet({ názov: z.reťazec() }),
});

Nakoniec exportujte objekt zbierky a zaregistrujte svoje zbierky.

exportkonšt zbierky = {spisovateľov:writers}

2. Minifikácia HTML

Astro 2.5 predstavuje možnosť compressHTML, ktorá odstráni všetky prázdne miesta (a zalomenia riadkov) z vášho HTML. Komponenty sú komprimované iba raz kompilátorom Astro a potom počas zostavovania. Toto sa robí s cieľom znížiť náklady na výkon.

Povolenie tejto možnosti vo vašom projekte je jednoduché. Stačí pridať nasledujúce riadky do svojho konfiguračného súboru. Minifikácia HTML funguje iba s komponentmi napísanými vo formáte súboru .astro.

exportpredvolenádefineConfig({komprimovať HTML:true})

3. Paralelné vykresľovanie

Vykresľovanie komponentov paralelne je dlho očakávanou funkciou v Astro. V prípadoch, keď podradené komponenty v rôznych podstromoch získavajú údaje, Astro 2.5 zlepšuje časy načítania paralelným získavaním údajov.

To umožňuje, aby bol komponent nižšie v strome vykreslený bez toho, aby bol blokovaný komponentom na načítanie údajov vyššie v strome. V súčasnosti paralelné vykresľovanie nefunguje správne pole.mapa asynchrónne fragmenty.

Astro 2.5 tiež prináša úplne novú sadu experimentálnych funkcií, ktoré sú uvedené nižšie.

4. Hybridné vykresľovanie

Astro 2.5 vám teraz umožňuje definovať novú možnosť výstupu servera vo vašom konfiguračnom súbore, ktorá prepíše predvolené správanie SSR pred vykresľovaním.

Ak chcete využiť výhody hybridného vykresľovania, nastavte hybridný výstup na hodnotu true v experimentálnej časti vašej konfigurácie a pridajte adaptér.

Ak to urobíte, predvolene sa predbežne vykreslí celá vaša lokalita, ale toto správanie môžete zrušiť nastavením predbežné vykreslenie export akejkoľvek trasy alebo stránky do false:

exportkonšt predbežne vykresľovať = falošný;

5. Zákaznícke smernice pre klientov

Astro 2.5 predstavuje addClientDirective API pre vlastné riadenie hydratácie komponentov na strane klienta pomocou vlastných zákazník:* smernice.

Ak chcete použiť túto funkciu, aktivujte experimental.customClientDirectives v konfiguračnom súbore a udržiavajte minimálne vstupné body direktívy, aby ste predišli akémukoľvek negatívnemu vplyvu na hydratáciu komponentov.

Funkcia typu ClientDirective by mal byť exportovaný zo súboru smerníc vášho klienta. Napríklad nasledujúci kód hydratuje komponent pri prvom kliknutí na okno.

importovať { ClientDirective } od"astro";
konšt clickDirective: ClientDirective = (záťaž, opts, el) => {
okno.addEventListener(
"klik",
async () => {
konšt hydrát = čakať naložiť();
čakať hydrát();
 },
 { raz: pravda }
 );
};
exportpredvolená clickDirective;

Teraz klient: klikni môžu byť použité vo vašich komponentoch s plnou podporou typu.

Ako nainštalovať Astro

Astro poskytuje rozhranie príkazového riadka (CLI) tzv vytvoriť astro aby ste mohli začať. Musíte mať NodeJS 16+ a npm nainštalované na vašom počítači.

npm vytvoriť astro@najnovšie

Toto postaví nový Astro projekt od nuly. Postupujte podľa pokynov na obrazovke a nastavte veci (ak si nie ste istí, čo si vybrať, použite odporúčané možnosti). Ďalšie, cd do priečinka projektu a potom spustite:

npm spustiť dev

Môžete pridať rámce ako React pomocou astro pridať. Ak je všetko správne nainštalované, môžete ho otvoriť localhost: 3000 na vašom počítači a mali by ste vidieť správu „Vitajte v Astro“.

Ak sa vám nepáči NPM, môžete sa rozhodnúť pre iné Správcovia balíkov JavaScript ako priadza a PNPM.

Zlepšenie skúseností vývojárov s Astro

Rámce typu všetko v jednom, ako je Astro, umožňujú čo najhladšie vytváranie rýchlych webových stránok. Je to fantastické, povaha agnostika UI znamená, že môžete bez problémov pracovať s akýmkoľvek populárnym rámcom JavaScript podľa vášho výberu.