JavaScript metakehys Astro on päivitetty, ja se sisältää valikoiman uusia ominaisuuksia.

AstroJS on fantastinen JavaScript-pohjainen työkalu, jota käytetään supernopeiden staattisten verkkosivustojen luomiseen. Sen avulla voit luoda verkkosivustoja käyttämällä useita JavaScript-kehyksiä, kuten React, Vue ja Svelte. Astro 2.5 tuo kokonaan uusia ominaisuuksia, joista osa käsitellään tässä.

1. Tietojen kokoelmat

Astro 2.5 tukee nyt JSON: n ja YAML: n tallentamista kokoelmiin. Uusi tyyppi: 'data' -ominaisuus mahdollistaa tämän toiminnon. Osoittaaksesi tämän, luo 'writers'-tietokokoelma src/content-kansioon, jossa JSON tai YAML tiedostoja voidaan lisätä.

Määritä seuraavaksi kokoelmat tiedostossa src/content/config.ts käyttämällä defineCollection ja z apuohjelmat alkaen astro: sisältö moduuli ja määritä tyyppi dataksi.

tuonti { z, defineCollection } alkaen"astro: sisältö";
konst writers = defineCollection({
tyyppi: "data",
kaava: z.esine({ nimi: z.merkkijono() }),
});

Vie lopuksi kokoelmaobjekti kokoelmasi rekisteröimiseksi.

instagram viewer 
viedäkonst kokoelmat = {kirjoittajat:writers}

2. HTML-pienennys

Astro 2.5 esittelee pakkausHTML-vaihtoehdon, joka poistaa kaikki välilyönnit (ja rivinvaihdot) HTML-koodistasi. Astro-kääntäjä pakkaa komponentit vain kerran ja sitten koonnin aikana. Tämä tehdään suorituskustannusten vähentämiseksi.

Tämän vaihtoehdon ottaminen käyttöön projektissasi on helppoa. Lisää vain seuraavat rivit asetustiedostoon. HTML Minification toimii vain .astro-tiedostomuotoon kirjoitettujen komponenttien kanssa.

viedäoletuksenadefineConfig({pakkaa HTML:totta})

3. Rinnakkainen renderöinti

Komponenttien rinnakkainen renderöinti on kauan odotettu ominaisuus Astrossa. Tapauksissa, joissa eri alipuiden alikomponentit hakevat tietoja, Astro 2.5 parantaa latausaikoja hakemalla tietoja rinnakkain.

Tämä mahdollistaa puussa alempana olevan komponentin hahmontamisen ilman, että puun ylempänä oleva tiedonhakukomponentti estää sen. Tällä hetkellä rinnakkaisrenderöinti ei toimi kunnolla array.map asynkroniset fragmentit.

Astro 2.5 tuo myös kokonaan uusia kokeellisia ominaisuuksia, joita käsitellään alla.

4. Hybridi renderöinti

Astro 2.5 mahdollistaa nyt uuden palvelimen tulosteen määrittämisen asetustiedostossasi, joka ohittaa SSR: n oletusarvoisen esirenderöinnin.

Hyödynnä hybridirenderöintiä määrittämällä hybridilähtö arvoksi true määrityksen kokeellisessa osassa ja lisää sovitin.

Tämän tekeminen esihahmontaa koko sivustosi oletuksena, mutta voit poistaa tämän toiminnon käytöstä asettamalla esirenderöidä minkä tahansa reitin tai sivun vienti false:

viedäkonst esirenderöi = väärä;

5. Mukautetut asiakasohjeet

Astro 2.5 esittelee addClientDirective API: n mukautettuun asiakaspuolen komponenttien nesteytyshallintaan mukautetulla asiakas:* direktiivit.

Jos haluat käyttää tätä ominaisuutta, ota käyttöön experimental.customClientDirectives konfiguraatiotiedostossa ja pidä direktiivin syöttökohdat mahdollisimman vähäisinä välttääksesi kielteiset vaikutukset komponenttien hydraatioon.

Tyyppifunktio ClientDirective tulee viedä asiakasohjetiedostostasi. Esimerkiksi seuraava koodi kosteuttaa komponenttia ensimmäisellä napsautuksella ikkunaa.

tuonti { ClientDirective } alkaen"astro";
konst clickDirective: ClientDirective = (kuorma, opts, el) => {
ikkuna.addEventListener(
"klikkaus",
asynk () => {
konst hydraatti = odottaa ladata();
odottaa hydraatti();
 },
 { kerran: totta }
 );
};
viedäoletuksena clickDirective;

Nyt asiakas: napsauta voidaan käyttää komponenteissasi täydellä tyyppituella.

Kuinka asentaa Astro

Astro tarjoaa Command Line Interface (CLI) -nimisen luoda astro jotta pääset alkuun. Sinulla on oltava NodeJS 16+ ja npm asennettuna koneellesi.

npm luo astro@Viimeisin

Tämä rakentaa uuden Astro-projektin tyhjästä. Määritä asetukset noudattamalla näytön ohjeita (jos et ole varma, mitä valita, käytä vain suositeltuja vaihtoehtoja). Seuraava, CD projektikansioon ja suorita sitten:

npm run dev

Voit lisätä kehyksiä, kuten React, käyttämällä astro lisäys. Jos kaikki on asennettu oikein, voit avata paikallinen isäntä: 3000 ja sinun pitäisi nähdä "Tervetuloa Astroon" -viesti.

Jos et pidä NPM: stä, voit valita muun JavaScript-pakettien hallintaohjelmat kuten lanka ja PNPM.

Kehittäjäkokemuksen parantaminen Astrolla

All-in-one Frameworks, kuten Astro, tekevät nopeiden verkkosivustojen kehittämisestä mahdollisimman sujuvaa. Se on fantastinen, käyttöliittymän agnostinen luonne tarkoittaa, että voit työskennellä minkä tahansa valitsemasi suositun JavaScript-kehyksen kanssa ilman vaivaa.