5 novih značajki za isprobavanje u Astro 2.5

AstroJS je fantastičan alat temeljen na JavaScriptu koji se koristi za izradu superbrzih statičnih web stranica. Omogućuje vam izradu web stranica pomoću više JavaScript okvira kao što su React, Vue i Svelte. Astro 2.5 donosi potpuno novi skup značajki od kojih će neke biti obrađene ovdje.

1. Zbirke podataka

Astro 2.5 sada podržava pohranu JSON i YAML u zbirkama. Novo svojstvo type: 'data' omogućuje ovu funkcionalnost. Da biste to demonstrirali, stvorite zbirku podataka 'pisaca' u mapi src/content, gdje JSON ili YAML datoteke se mogu dodati.

Zatim konfigurirajte zbirke u src/content/config.ts pomoću definiraj Zbirku i z komunalije od astro: sadržaj modul i postavljanje tipa podataka.

uvoz { z, definiraj zbirku } iz"astro: sadržaj";
konst pisci = defineCollection({
tip: "podaci",
shema: z.objekt({ Ime: z.niz() }),
});

Na kraju, izvezite objekt zbirke da biste registrirali svoje zbirke.

izvozkonst zbirke = {književnici:pisci}

2. Minifikacija HTML-a

Astro 2.5 predstavlja opciju compressHTML koja uklanja sve razmake (i prijelome redaka) iz vašeg HTML-a. Komponente se komprimiraju samo jednom putem Astro kompajlera, a zatim tijekom izgradnje. To se radi kako bi se smanjili troškovi izvedbe.

Lako je omogućiti ovu opciju u svom projektu. Samo dodajte sljedeće retke svojoj konfiguracijskoj datoteci. HTML Minification radi samo s komponentama napisanim u .astro formatu datoteke.

izvozzadanodefinirajKonfig({komprimiratiHTML:pravi})

3. Paralelizirano iscrtavanje

Paralelno prikazivanje komponenti dugo je očekivana značajka u Astrou. U slučajevima kada podređene komponente u različitim podstablima dohvaćaju podatke, Astro 2.5 poboljšava vrijeme učitavanja paralelnim dohvaćanjem podataka.

To omogućuje komponenti niže u stablu da bude prikazana bez blokiranja komponente za dohvaćanje podataka više na stablu. Trenutačno paralelno prikazivanje ne radi ispravno s niz.karta asinkroni fragmenti.

Astro 2.5 također donosi potpuno novi skup eksperimentalnih značajki koje su opisane u nastavku.

4. Hibridno iscrtavanje

Astro 2.5 sada vam omogućuje definiranje nove izlazne opcije poslužitelja u vašoj konfiguracijskoj datoteci koja nadjačava zadano ponašanje SSR-a prije renderiranja.

Da biste iskoristili prednosti hibridnog prikazivanja, postavite hibridni izlaz na true u eksperimentalnom dijelu vaše konfiguracije i dodajte adapter.

Time ćete prema zadanim postavkama unaprijed renderirati cijelu svoju web-lokaciju, ali to ponašanje možete isključiti postavljanjem unaprijed prikazati izvoz bilo koje rute ili stranice na false:

izvozkonst unaprijed prikazati = lažno;

5. Prilagođene upute klijenta

Astro 2.5 predstavlja addClientDirective API za prilagođenu kontrolu hidratacije komponenti na strani klijenta pomoću prilagođenih klijent:* direktive.

Za korištenje ove značajke, Omogući eksperimentalni.customClientDirectives u konfiguracijskoj datoteci i zadržite minimalne ulazne točke direktiva kako biste izbjegli negativan utjecaj na hidrataciju komponente.

Funkcija tipa ClientDirective treba izvesti iz vaše klijentske datoteke s direktivama. Na primjer, sljedeći kod hidratizira komponentu prvim klikom na prozor.

uvoz { ClientDirective } iz"astro";
konst clickDirective: ClientDirective = (opterećenje, opts, el) => {
prozor.addEventListener(
"klik",
asinkroni () => {
konst hidratizirati = čekati opterećenje();
čekati hidrat();
 },
 { jednom: istina }
 );
};
izvozzadano clickDirective;

Sada klijent: klik može se koristiti u vašim komponentama s punom podrškom za tipove.

Kako instalirati Astro

Astro pruža sučelje naredbenog retka (CLI) tzv stvoriti astro za početak. Morate imati NodeJS 16+ i npm instalirani na vašem računalu.

npm stvoriti astro@najnoviji

Ovo će od nule postaviti novi Astro projekt. Slijedite upute na zaslonu za postavljanje stvari (ako niste sigurni što odabrati, jednostavno idite s preporučenim opcijama). Sljedeći, CD u mapu projekta, zatim pokrenite:

npm run dev

Možete dodati okvire kao što je React, koristeći astro dodati. Ako je sve ispravno instalirano, možete otvoriti lokalni host: 3000 na vašem računalu i trebali biste vidjeti poruku "Dobrodošli u Astro".

Ako vam se ne sviđa NPM, možete se odlučiti za drugi JavaScript upravitelji paketa poput pređe i PNPM.

Poboljšanje iskustva programera uz Astro

Sveobuhvatni okviri kao što je Astro čine razvoj brzih web stranica što lakšim. To je fantastična priroda koja ne ovisi o korisničkom sučelju i znači da možete raditi s bilo kojim popularnim JavaScript okvirom po svom izboru bez ikakvih problema.