5 nye funktioner at prøve i Astro 2.5

AstroJS er et fantastisk JavaScript-baseret værktøj, der bruges til at skabe superhurtige statiske websteder. Det giver dig mulighed for at oprette websteder ved hjælp af flere JavaScript-rammer som React, Vue og Svelte. Astro 2.5 bringer et helt nyt sæt funktioner, hvoraf nogle vil blive dækket her.

1. Dataindsamlinger

Astro 2.5 understøtter nu lagring af JSON og YAML i samlinger. Den nye type: 'data' egenskab aktiverer denne funktionalitet. For at demonstrere dette skal du oprette en 'writers' dataindsamling i src/content-mappen, hvor JSON eller YAML filer kan tilføjes.

Konfigurer derefter samlingerne i src/content/config.ts ved hjælp af defineCollection og z forsyningsselskaber fra astro: indhold modul og indstille typen til data.

importere { z, defineCollection } fra"astro: indhold";
konst writers = defineCollection({
type: "data",
skema: z.objekt({ navn: z.snor() }),
});

Til sidst eksporterer du samlingsobjektet for at registrere dine samlinger.

eksportkonst samlinger = {forfattere:forfattere}

2. HTML minifikation

Astro 2.5 introducerer muligheden compressHTML, der fjerner alle hvide mellemrum (og linjeskift) fra din HTML. Komponenter komprimeres kun én gang af Astro-kompileren og derefter under build. Dette gøres for at reducere ydelsesomkostningerne.

Det er nemt at aktivere denne mulighed i dit projekt. Du skal blot tilføje følgende linjer til din konfigurationsfil. HTML-minifikation fungerer kun med komponenter skrevet i .astro-filformatet.

eksportStandarddefineConfig({komprimere HTML:rigtigt})

3. Paralleliseret gengivelse

At rendere komponenter parallelt er en længe ventet funktion i Astro. I tilfælde, hvor underordnede komponenter i forskellige undertræer henter data, forbedrer Astro 2.5 indlæsningstiderne ved at hente data parallelt.

Dette gør det muligt at rendere en komponent længere nede i træet uden at blive blokeret af en datahentningskomponent højere oppe i træet. I øjeblikket fungerer parallel gengivelse ikke korrekt med array.map asynkrone fragmenter.

Astro 2.5 bringer også et helt nyt sæt eksperimentelle funktioner, som er dækket nedenfor.

4. Hybrid gengivelse

Astro 2.5 giver dig nu mulighed for at definere en ny serveroutputindstilling i din konfigurationsfil, der tilsidesætter standardpræ-renderingsadfærden for SSR.

Indstil for at drage fordel af hybrid gengivelse hybridoutput til sand i den eksperimentelle sektion af din konfiguration, og tilføj en adapter.

Hvis du gør dette, vil hele dit websted som standard blive gengivet på forhånd, men du kan fravælge denne adfærd ved at indstille prærender eksport af enhver rute eller side til false:

eksportkonst prærender = falsk;

5. Brugerdefinerede kundedirektiver

Astro 2.5 introducerer addClientDirective API til brugerdefineret klient-side komponenthydreringskontrol ved hjælp af brugerdefineret klient:* direktiver.

Aktiver for at bruge denne funktion experimental.customClientDirectives i konfigurationsfilen og hold direktivindgangspunkter minimale for at undgå enhver negativ indvirkning på komponenthydrering.

En funktion af typen Kundedirektiv skal eksporteres fra din klientdirektivfil. For eksempel hydrerer følgende kode komponenten ved det første klik på vinduet.

importere { ClientDirective } fra"astro";
konst clickDirective: ClientDirective = (læs, opt., el) => {
vindue.addEventListener(
"klik",
asynkron () => {
konst hydrat = vente belastning();
vente hydrat();
 },
 { enkelt gang: rigtigt }
 );
};
eksportStandard klikdirektiv;

Nu klient: klik kan bruges i dine komponenter med fuld type support.

Sådan installeres Astro

Astro giver en kommandolinjegrænseflade (CLI) kaldet skabe astro for at få dig i gang. Du skal have NodeJS 16+ og npm installeret på din maskine.

npm oprette astro@seneste

Dette vil stilladsere et nyt Astro-projekt fra bunden. Følg instruktionerne på skærmen for at konfigurere tingene (hvis du ikke er sikker på, hvad du skal vælge, skal du bare gå med de anbefalede muligheder). Næste, cd ind i projektmappen, og kør derefter:

npm køre dev

Du kan tilføje rammer som React vha astro tilføje. Hvis alt er installeret korrekt, kan du åbne lokale vært: 3000 på din maskine, og du skulle se en "Velkommen til Astro"-meddelelse.

Hvis du ikke kan lide NPM, kan du vælge en anden JavaScript-pakkeadministratorer som Garn og PNPM.

Forbedring af udvikleroplevelsen med Astro

Alt-i-én-frameworks som Astro gør udvikling af hurtige hjemmesider så smidig som muligt. Det er fantastisk, UI-agnostisk natur, hvilket betyder, at du kan arbejde med enhver populær JavaScript-ramme efter eget valg uden besvær.