5 nových funkcí k vyzkoušení v Astro 2.5

AstroJS je fantastický nástroj založený na JavaScriptu, který se používá k vytváření superrychlých statických webových stránek. Umožňuje vám vytvářet webové stránky pomocí více frameworků JavaScript, jako jsou React, Vue a Svelte. Astro 2.5 přináší zcela novou sadu funkcí, z nichž některé zde budou popsány.

1. Sběr dat

Astro 2.5 nyní podporuje ukládání JSON a YAML do kolekcí. Nová vlastnost typu: 'data' tuto funkci umožňuje. Chcete-li to demonstrovat, vytvořte kolekci dat 'writers' ve složce src/content, kde JSON nebo YAML soubory lze přidat.

Dále nakonfigurujte kolekce v src/content/config.ts pomocí defineCollection a z inženýrské sítě od astro: obsah modul a nastavení typu na data.

import { z, defineCollection } z"astro: obsah";
konst spisovatelé = defineCollection({
typ: "data",
schéma: z.objekt({ název: z.tětiva() }),
});

Nakonec exportujte objekt sbírky a zaregistrujte své sbírky.

vývozníkonst sbírky = {spisovatelé:spisovatelé}

2. Minifikace HTML

Astro 2.5 zavádí možnost compressHTML, která odstraní všechna prázdná místa (a konce řádků) z vašeho HTML. Komponenty jsou komprimovány pouze jednou kompilátorem Astro a poté během sestavování. To se provádí za účelem snížení nákladů na výkon.

Povolení této možnosti ve vašem projektu je snadné. Stačí přidat následující řádky do konfiguračního souboru. HTML Minification funguje pouze s komponentami napsanými ve formátu souboru .astro.

vývoznívýchozídefineConfig({komprimovat HTML:skutečný})

3. Paralelní vykreslování

Paralelní vykreslování komponent je v Astro dlouho očekávanou funkcí. V případech, kdy podřízené komponenty v různých podstromech načítají data, Astro 2.5 zlepšuje časy načítání tím, že načítá data paralelně.

To umožňuje, aby komponenta níže ve stromu byla vykreslena, aniž by byla blokována komponentou pro načítání dat výše ve stromu. V současné době paralelní vykreslování nefunguje správně pole.mapa asynchronní fragmenty.

Astro 2.5 také přináší zcela novou sadu experimentálních funkcí, které jsou popsány níže.

4. Hybridní vykreslování

Astro 2.5 vám nyní umožňuje definovat novou možnost výstupu serveru ve vašem konfiguračním souboru, která přepíše výchozí chování SSR před vykreslováním.

Chcete-li využít výhody hybridního vykreslování, nastavte hybridní výstup na hodnotu true v experimentální části vaší konfigurace a přidejte adaptér.

Ve výchozím nastavení se tím předběžně vykreslí celý váš web, ale toto chování můžete zrušit nastavením předvykreslení export jakékoli trasy nebo stránky do false:

vývozníkonst prerender = Nepravdivé;

5. Vlastní klientské směrnice

Astro 2.5 zavádí addClientDirective API pro vlastní řízení hydratace komponent na straně klienta pomocí vlastních klient:* směrnice.

Chcete-li tuto funkci použít, aktivujte experimental.customClientDirectives v konfiguračním souboru a ponechat vstupní body direktivy minimální, aby se předešlo jakémukoli negativnímu dopadu na hydrataci komponent.

Funkce typu ClientDirective by měl být exportován ze souboru direktivy klienta. Například následující kód hydratuje komponentu při prvním kliknutí na okno.

import { ClientDirective } z"astro";
konst clickDirective: ClientDirective = (zátěž, opts, el) => {
okno.addEventListener(
"kliknout",
asynchronní () => {
konst hydrát = čekat zatížení();
čekat hydrát();
 },
 { jednou: skutečný }
 );
};
vývoznívýchozí clickDirective;

Nyní klient: klikněte lze použít ve vašich komponentách s plnou podporou typu.

Jak nainstalovat Astro

Astro poskytuje rozhraní příkazového řádku (CLI). vytvořit astro abyste mohli začít. Musíte mít NodeJS 16+ a npm nainstalované na vašem počítači.

npm vytvořit astro@nejnovější

To bude lešení nového Astro projektu od nuly. Postupujte podle pokynů na obrazovce a nastavte věci (pokud si nejste jisti, co vybrat, použijte doporučené možnosti). Další, CD do složky projektu a poté spusťte:

npm spustit dev

Můžete přidat rámce jako React, using astro přidat. Pokud je vše správně nainstalováno, můžete otevřít localhost: 3000 na vašem počítači a měli byste vidět zprávu „Vítejte v Astro“.

Pokud se vám nelíbí NPM, můžete se rozhodnout pro jiné Správci balíčků JavaScript jako příze a PNPM.

Zlepšení zkušeností vývojářů s Astro

Rámce typu vše v jednom, jako je Astro, umožňují co nejhladší vývoj rychlých webových stránek. Je to fantastické, povaha agnostika uživatelského rozhraní znamená, že můžete bez problémů pracovat s jakýmkoli oblíbeným rámcem JavaScriptu dle vašeho výběru.