Metaframework JavaScript Astro został zaktualizowany i oferuje wybór nowych funkcji.

AstroJS to fantastyczne narzędzie oparte na JavaScript, służące do tworzenia superszybkich, statycznych stron internetowych. Pozwala tworzyć strony internetowe przy użyciu wielu frameworków JavaScript, takich jak React, Vue i Svelte. Astro 2.5 oferuje zupełnie nowy zestaw funkcji, z których niektóre zostaną omówione tutaj.

1. Zbiory danych

Astro 2.5 obsługuje teraz przechowywanie JSON i YAML w kolekcjach. Nowa właściwość typu: „data” umożliwia tę funkcję. Aby to zademonstrować, utwórz kolekcję danych „pisarzy” w folderze src/content, gdzie JSON Lub YAML można dodawać pliki.

Następnie skonfiguruj kolekcje w src/content/config.ts przy użyciu zdefiniuj kolekcję I z media od astro: treść module i ustawienie typu na data.

import { z, zdefiniuj kolekcję } z„astro: zawartość”;
konst pisarze = zdefiniuj kolekcję ({
typ: "dane",
schemat: z.obiekt({ nazwa: z.strunowy() }),
});

Na koniec wyeksportuj obiekt kolekcji, aby zarejestrować swoje kolekcje.

instagram viewer 
eksportkonst kolekcje = {pisarze:pisarze}

2. Minifikacja HTML

Astro 2.5 wprowadza opcję compressHTML, która usuwa wszystkie spacje (i podziały wierszy) z kodu HTML. Komponenty są kompresowane tylko raz przez kompilator Astro, a następnie podczas kompilacji. Odbywa się to w celu obniżenia kosztów wydajności.

Włączenie tej opcji w projekcie jest łatwe. Po prostu dodaj następujące wiersze do pliku konfiguracyjnego. Minifikacja HTML działa tylko z komponentami zapisanymi w formacie pliku .astro.

eksportdomyślnyzdefiniujkonfigurację({skompresuj HTML:PRAWDA})

3. Renderowanie równoległe

Równoległe renderowanie komponentów to długo oczekiwana funkcja w Astro. W przypadkach, gdy komponenty potomne w różnych poddrzewach pobierają dane, Astro 2.5 poprawia czas ładowania, pobierając dane równolegle.

Pozwala to na renderowanie komponentu znajdującego się niżej w drzewie bez blokowania go przez komponent pobierający dane znajdujący się wyżej w drzewie. W tej chwili renderowanie równoległe nie działa prawidłowo tablica. mapa fragmenty asynchroniczne.

Astro 2.5 oferuje również zupełnie nowy zestaw eksperymentalnych funkcji, które omówiono poniżej.

4. Renderowanie hybrydowe

Astro 2.5 pozwala teraz zdefiniować nową opcję wyjścia serwera w pliku konfiguracyjnym, która zastępuje domyślne zachowanie SSR przed renderowaniem.

Aby skorzystać z renderowania hybrydowego, ustaw Wyjście hybrydowe na true w sekcji eksperymentalnej konfiguracji i dodaj adapter.

Spowoduje to domyślne wstępne renderowanie całej witryny, ale możesz zrezygnować z tego zachowania, ustawiając prerenderować wyeksportuj dowolną trasę lub stronę do false:

eksportkonst renderowanie wstępne = FAŁSZ;

5. Niestandardowe dyrektywy klienta

Astro 2.5 wprowadza interfejs API addClientDirective do niestandardowej kontroli nawodnienia komponentów po stronie klienta za pomocą custom klient:* dyrektywy.

Aby użyć tej funkcji, Włącz eksperymentalne.customClientDirectives w pliku konfiguracyjnym i utrzymuj minimalne punkty wejścia dyrektywy, aby uniknąć negatywnego wpływu na nawodnienie komponentów.

Funkcja typu Dyrektywa Klienta należy wyeksportować z pliku dyrektywy klienta. Na przykład poniższy kod nawilża komponent przy pierwszym kliknięciu okna.

import { Dyrektywa klienta } z„astro”;
konst clickDirective: ClientDirective = (obciążenie, opcje, el) => {
okno.addEventListener(
"Kliknij",
asynchroniczny () => {
konst uwodnić = czekać na obciążenie();
czekać na hydrat();
 },
 { raz: PRAWDA }
 );
};
eksportdomyślny dyrektywa kliknięcia;

Teraz Klient: kliknij może być używany w twoich komponentach z pełną obsługą typów.

Jak zainstalować Astro

Astro udostępnia interfejs wiersza poleceń (CLI) o nazwie stworzyć astro aby zacząć. Musisz mieć NodeJS 16+ i npm zainstalowane na twoim komputerze.

npm utwórz astro@najnowszy

Spowoduje to zbudowanie nowego projektu Astro od podstaw. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby skonfigurować ustawienia (jeśli nie masz pewności, co wybrać, skorzystaj z zalecanych opcji). Następny, płyta CD do folderu projektu, a następnie uruchom:

npm uruchom dev

Możesz dodać frameworki, takie jak React, using dodaj astro. Jeśli wszystko jest poprawnie zainstalowane, możesz otworzyć lokalny host: 3000 na komputerze i powinieneś zobaczyć komunikat „Witamy w Astro”.

Jeśli nie lubisz NPM, możesz wybrać inny Menedżerowie pakietów JavaScript jak przędza i PNPM.

Zwiększanie doświadczenia programistów dzięki Astro

Uniwersalne frameworki, takie jak Astro, sprawiają, że tworzenie szybkich stron internetowych jest tak płynne, jak to tylko możliwe. Jest fantastyczna, niezależna od interfejsu użytkownika, co oznacza, że ​​możesz bez problemu pracować z dowolnym popularnym frameworkiem JavaScript.