5 naujos funkcijos, kurias reikia išbandyti naudojant Astro 2.5

AstroJS yra fantastiškas JavaScript pagrįstas įrankis, naudojamas kuriant itin greitas statines svetaines. Tai leidžia kurti svetaines naudojant kelias „JavaScript“ sistemas, tokias kaip „React“, „Vue“ ir „Svelte“. „Astro 2.5“ pateikia visiškai naują funkcijų rinkinį, kai kurios iš jų bus aptartos čia.

1. Duomenų rinkiniai

„Astro 2.5“ dabar palaiko JSON ir YAML saugojimą kolekcijose. Naujo tipo: „duomenų“ ypatybė įgalina šią funkciją. Norėdami tai parodyti, aplanke src/content sukurkite „rašytojų“ duomenų rinkinį, kur JSON arba YAML failus galima pridėti.

Tada sukonfigūruokite rinkinius src/content/config.ts naudodami defineCollection ir z komunalinės paslaugos iš astro: turinys modulį ir tipo nustatymą į duomenis.

importuoti { z, defineCollection } iš"astro: turinys";
konst writers = defineCollection({
tipo: "duomenys",
schema: z.objektas({ vardas: z.styga() }),
});

Galiausiai eksportuokite kolekcijos objektą, kad užregistruotumėte kolekcijas.

eksportuotikonst kolekcijos = {rašytojai:writers}

2. HTML sumažinimas

Astro 2.5 pristato kompresoHTML parinktį, kuri pašalina visus tarpus (ir eilučių lūžius) iš jūsų HTML. „Astro“ kompiliatorius komponentus suglaudina tik vieną kartą ir tada kūrimo metu. Tai daroma siekiant sumažinti veiklos sąnaudas.

Įgalinti šią parinktį projekte lengva. Tiesiog pridėkite šias eilutes į savo konfigūracijos failą. HTML sumažinimas veikia tik su komponentais, parašytais .astro failo formatu.

eksportuotinumatytasdefineConfig({suspausti HTML:tiesa})

3. Lygiagretus atvaizdavimas

Lygiagretus komponentų atvaizdavimas yra ilgai laukta „Astro“ funkcija. Tais atvejais, kai antriniai komponentai skirtinguose antriniuose medžiuose gauna duomenis, Astro 2.5 pagerina įkėlimo laiką, gaudama duomenis lygiagrečiai.

Tai leidžia pateikti toliau esantį komponentą medyje, neužblokuojant duomenų gavimo komponento, esančio aukščiau medyje. Šiuo metu lygiagretus atvaizdavimas tinkamai neveikia masyvas.žemėlapis asinchroniniai fragmentai.

Astro 2.5 taip pat pateikia visiškai naują eksperimentinių funkcijų rinkinį, kuris aprašytas toliau.

4. Hibridinis atvaizdavimas

Astro 2.5 dabar leidžia konfigūracijos faile apibrėžti naują serverio išvesties parinktį, kuri nepaiso numatytosios SSR išankstinio pateikimo elgsenos.

Norėdami pasinaudoti hibridinio atvaizdavimo pranašumais, nustatykite hibridinis išėjimas į „true“ savo konfigūracijos eksperimentinėje skiltyje ir pridėkite adapterį.

Tai atlikus pagal numatytuosius nustatymus bus iš anksto pateikta visa svetainė, tačiau galite atsisakyti šios elgsenos nustatydami iš anksto pateikti bet kokio maršruto ar puslapio eksportavimas į false:

eksportuotikonst prerender = klaidinga;

5. Individualizuotos klientų direktyvos

„Astro 2.5“ pristato „addClientDirective“ API, skirtą pasirinktiniam kliento komponento hidratacijos valdymui naudojant tinkintą klientas:* direktyvas.

Norėdami naudoti šią funkciją, įjunkite eksperimentinis.customClientDirectives konfigūracijos faile ir išlaikykite minimalius direktyvų įvesties taškus, kad išvengtumėte neigiamo poveikio komponentų hidratacijai.

Tipo funkcija Kliento direktyva turėtų būti eksportuotas iš jūsų kliento nurodymų failo. Pavyzdžiui, šis kodas drėkina komponentą pirmą kartą spustelėjus langą.

importuoti { ClientDirective } iš"astro";
konst clickDirective: ClientDirective = (apkrova, opts, el) => {
langas.addEventListener(
"spausti",
async () => {
konst hidratas = laukti įkelti ();
laukti hidratas ();
 },
 { kartą: tiesa }
 );
};
eksportuotinumatytas clickDirective;

Dabar klientas: spustelėkite gali būti naudojamas jūsų komponentuose su visu tipo palaikymu.

Kaip įdiegti Astro

Astro suteikia komandų eilutės sąsają (CLI), vadinamą sukurti astro kad pradėtumėte. Jūs turite turėti Jūsų kompiuteryje įdiegta NodeJS 16+ ir npm.

npm sukurti astro@naujausia

Taip bus sukurtas naujas Astro projektas nuo nulio. Vykdykite ekrane pateikiamas instrukcijas, kad nustatytumėte dalykus (jei nesate tikri, ką pasirinkti, tiesiog pasirinkite rekomenduojamas parinktis). Kitas, cd į projekto aplanką, tada paleiskite:

npm paleisti dev

Galite pridėti tokių sistemų kaip „React“, naudodami astro pridėti. Jei viskas teisingai įdiegta, galite atidaryti vietinis šeimininkas: 3000 kompiuteryje ir turėtumėte pamatyti pranešimą „Sveiki atvykę į Astro“.

Jei jums nepatinka NPM, galite pasirinkti kitą „JavaScript“ paketų tvarkyklės kaip verpalai ir PNPM.

Kūrėjo patirties gerinimas naudojant Astro

„Viskas viename“ sistemos, tokios kaip „Astro“, leidžia greitai kurti svetaines kuo sklandžiau. Tai fantastiška, vartotojo sąsajos agnostinė prigimtis reiškia, kad galite dirbti su bet kokia populiaria pasirinkta „JavaScript“ sistema be jokio vargo.