5 novih funkcij, ki jih lahko preizkusite v Astro 2.5

AstroJS je fantastično orodje, ki temelji na JavaScriptu in se uporablja za ustvarjanje superhitrih statičnih spletnih mest. Omogoča ustvarjanje spletnih mest z uporabo več ogrodij JavaScript, kot so React, Vue in Svelte. Astro 2.5 prinaša povsem nov nabor funkcij, od katerih bodo nekatere obravnavane tukaj.

1. Zbirke podatkov

Astro 2.5 zdaj podpira shranjevanje JSON in YAML v zbirkah. Nova lastnost type: 'data' omogoča to funkcionalnost. Če želite to prikazati, ustvarite zbirko podatkov 'piscev' v mapi src/content, kjer JSON oz YAML datoteke je mogoče dodati.

Nato konfigurirajte zbirke v src/content/config.ts z uporabo defineCollection in z pripomočki iz astro: vsebina modul in nastavitev vrste podatkov.

uvoz { z, definiraj zbirko } od"astro: vsebina";
konst pisci = defineCollection({
vrsta: "podatki",
shema: z.objekt({ ime: z.vrvica() }),
});

Na koncu izvozite predmet zbirke, da registrirate svoje zbirke.

izvozkonst zbirke = {pisatelji:pisci}

2. Minifikacija HTML

Astro 2.5 uvaja možnost compressHTML, ki odstrani vse presledke (in prelome vrstic) iz vašega HTML-ja. Komponente so stisnjene samo enkrat s prevajalnikom Astro in nato med gradnjo. To se naredi za zmanjšanje stroškov delovanja.

Omogočanje te možnosti v vašem projektu je enostavno. Samo dodajte naslednje vrstice v vašo konfiguracijsko datoteko. Minifikacija HTML deluje samo s komponentami, napisanimi v formatu datoteke .astro.

izvozprivzetodefineConfig({stisnitiHTML:prav})

3. Paralelno upodabljanje

Vzporedno upodabljanje komponent je dolgo pričakovana funkcija v Astro. V primerih, ko podrejene komponente v različnih poddrevesih pridobivajo podatke, Astro 2.5 izboljša čas nalaganja z vzporednim pridobivanjem podatkov.

To omogoča upodobitev komponente nižje v drevesu, ne da bi jo blokirala komponenta za pridobivanje podatkov višje v drevesu. Trenutno vzporedno upodabljanje ne deluje pravilno z array.map asinhroni fragmenti.

Astro 2.5 prinaša tudi povsem nov nabor eksperimentalnih funkcij, ki so obravnavane spodaj.

4. Hibridno upodabljanje

Astro 2.5 vam zdaj omogoča, da v vaši konfiguracijski datoteki definirate novo možnost izpisa strežnika, ki preglasi privzeto vedenje pred upodabljanjem SSR.

Če želite izkoristiti prednosti hibridnega upodabljanja, nastavite hybridOutput na true v eksperimentalnem delu vaše konfiguracije in dodajte adapter.

S tem bo privzeto vnaprej upodobljeno vaše celotno spletno mesto, vendar lahko to vedenje onemogočite tako, da nastavite predupodabljanje izvoz katere koli poti ali strani v false:

izvozkonst predupodabljanje = lažno;

5. Usmeritve strank po meri

Astro 2.5 uvaja API addClientDirective za nadzor hidracije komponente po meri na strani odjemalca z uporabo po meri stranka:* direktive.

Če želite uporabiti to funkcijo, omogočite eksperimentalno.customClientDirectives v konfiguracijski datoteki in naj bodo vstopne točke direktiv čim manjše, da se izognete kakršnemu koli negativnemu vplivu na hidracijo komponente.

Funkcija vrste ClientDirective je treba izvoziti iz vaše datoteke z direktivami odjemalca. Naslednja koda na primer hidrira komponento ob prvem kliku okna.

uvoz { ClientDirective } od"astro";
konst clickDirective: ClientDirective = (obremenitev, opts, el) => {
okno.addEventListener(
"klik",
asinh () => {
konst hidrat = čakati naloži();
čakati hidrat ();
 },
 { enkrat: prav }
 );
};
izvozprivzeto clickDirective;

zdaj stranka: klik lahko uporabite v svojih komponentah s polno podporo tipov.

Kako namestiti Astro

Astro ponuja vmesnik ukazne vrstice (CLI), imenovan ustvari astro za začetek. Moraš imeti NodeJS 16+ in npm sta nameščena na vašem računalniku.

npm ustvari astro@najnovejše

To bo postavilo nov projekt Astro iz nič. Sledite navodilom na zaslonu, da nastavite stvari (če niste prepričani, kaj izbrati, izberite priporočene možnosti). Naslednji, cd v mapo projekta, nato zaženite:

npm run dev

Ogrodja, kot je React, lahko dodate z uporabo astro dodatek. Če je vse pravilno nameščeno, lahko odprete lokalni gostitelj: 3000 na vašem računalniku in videli bi sporočilo "Dobrodošli v Astro".

Če vam ni všeč NPM, se lahko odločite za drugega Upravljalniki paketov JavaScript kot preja in PNPM.

Izboljšanje razvijalske izkušnje z Astro

Ogrodja vse v enem, kot je Astro, omogočajo čim bolj gladko razvijanje hitrih spletnih mest. Je fantastična, narava neodvisna od uporabniškega vmesnika pomeni, da lahko delate s katerim koli priljubljenim okvirom JavaScript po vaši izbiri brez težav.