Astro 2.5'te Denenecek 5 Yeni Özellik

AstroJS, süper hızlı statik web siteleri oluşturmak için kullanılan harika bir JavaScript tabanlı araçtır. React, Vue ve Svelte gibi birden çok JavaScript çerçevesini kullanarak web siteleri oluşturmanıza olanak tanır. Astro 2.5, bazıları burada ele alınacak olan yepyeni bir dizi özellik getiriyor.

1. Veri Koleksiyonları

Astro 2.5 artık koleksiyonlarda JSON ve YAML depolamayı destekliyor. Yeni type: 'data' özelliği bu işlevi etkinleştirir. Bunu göstermek için, src/content klasöründe bir "yazarlar" veri koleksiyonu oluşturun; burada JSON veya YAML dosyalar eklenebilir.

Ardından, src/content/config.ts içindeki koleksiyonları aşağıdakileri kullanarak yapılandırın: Koleksiyonu tanımla Ve z yardımcı programlar yıldız: içerik modül ve türün veri olarak ayarlanması.

içe aktarmak { z, koleksiyon tanımla } itibaren"astro: içerik";
sabit yazarlar = defineCollection({
tip: "veri",
şema: z.nesne({ isim: z.sicim() }),
});

Son olarak, koleksiyonlarınızı kaydetmek için koleksiyon nesnesini dışa aktarın.

ihracatsabit koleksiyonlar = {yazarlar:yazarlar}

2. HTML Küçültme

Astro 2.5, HTML'nizden tüm beyaz boşlukları (ve satır sonlarını) kaldıran sıkıştırmaHTML seçeneğini sunar. Bileşenler, Astro derleyici tarafından yalnızca bir kez ve ardından derleme sırasında sıkıştırılır. Bu, performans maliyetlerini azaltmak için yapılır.

Projenizde bu seçeneği etkinleştirmek kolaydır. Yapılandırma dosyanıza aşağıdaki satırları eklemeniz yeterlidir. HTML Küçültme yalnızca .astro dosya biçiminde yazılmış bileşenlerle çalışır.

ihracatvarsayılantanımlaYapılandırma({kompresHTML:doğru})

3. Paralel İşleme

Bileşenleri paralel olarak işlemek, Astro'da uzun zamandır beklenen bir özelliktir. Farklı alt ağaçlardaki alt bileşenlerin veri getirdiği durumlarda Astro 2.5, verileri paralel olarak getirerek yükleme sürelerini iyileştirir.

Bu, ağacın daha aşağısındaki bir bileşenin, ağacın daha yukarısındaki bir veri getirme bileşeni tarafından bloke edilmeden işlenmesine izin verir. Şu anda, paralel oluşturma şu özelliklerle düzgün çalışmıyor: dizi.harita eşzamansız parçalar

Astro 2.5 ayrıca aşağıda ele alınan tamamen yeni bir dizi deneysel özellik getiriyor.

4. Hibrit Oluşturma

Astro 2.5 artık yapılandırma dosyanızda SSR'nin varsayılan ön işleme davranışını geçersiz kılan yeni bir sunucu çıktı seçeneği tanımlamanıza izin veriyor.

Hibrit oluşturmanın avantajlarından yararlanmak için, hibritÇıktı yapılandırmanızın deneysel bölümünde true yapın ve bir adaptör ekleyin.

Bunu yapmak varsayılan olarak tüm sitenizi önceden oluşturur, ancak ayarlayarak bu davranışı devre dışı bırakabilirsiniz. önceden oluşturucu herhangi bir rotanın veya sayfanın false olarak dışa aktarılması:

ihracatsabit önceden oluşturucu = YANLIŞ;

5. Özel İstemci Yönergeleri

Astro 2.5, özel kullanarak özel istemci tarafı bileşen hidrasyon kontrolü için addClientDirective API'sini sunar. müşteri:* direktifler.

Bu özelliği kullanmak için Etkinleştir deneysel.customClientYönergeleri yapılandırma dosyasında ve bileşen hidrasyonu üzerinde herhangi bir olumsuz etkiyi önlemek için yönerge giriş noktalarını minimumda tutun.

tip bir fonksiyon İstemci Yönergesi istemci direktif dosyanızdan dışa aktarılmalıdır. Örneğin, aşağıdaki kod, pencereye ilk tıklandığında bileşeni nemlendirir.

içe aktarmak { İstemci Yönergesi } itibaren"astro";
sabit tıklama Yönergesi: İstemci Yönergesi = (yük, tercihler, el) => {
pencere.addEventListener(
"tıklamak",
zaman uyumsuz () => {
sabit hidrat = beklemek yük();
beklemek hidrat();
 },
 { bir kere: doğru }
 );
};
ihracatvarsayılan yönergeyi tıklayın;

Şimdi müşteri: tıklayın tam tip desteği ile bileşenlerinizde kullanılabilir.

Astro'nun Kurulumu

Astro, adı verilen bir Komut Satırı Arayüzü (CLI) sağlar. astro oluşturmak başlaman için Sahip olmalısın Makinenizde NodeJS 16+ ve npm yüklü.

npm astro oluştur@en sonuncu

Bu, sıfırdan yeni bir Astro projesinin temelini oluşturacak. Ayarları yapmak için ekrandaki yönergeleri izleyin (neyi seçeceğinizden emin değilseniz önerilen seçeneklerle devam edin). Sonraki, CD proje klasörüne, ardından şunu çalıştırın:

npm geliştiriciyi çalıştır

Kullanarak React gibi çerçeveler ekleyebilirsiniz. Astro ekle. Her şey doğru yüklendiyse açabilirsiniz yerel ana bilgisayar: 3000 makinenizde bir "Astro'ya Hoş Geldiniz" mesajı görmelisiniz.

NPM'den hoşlanmıyorsanız, diğerlerini seçebilirsiniz. JavaScript Paket Yöneticileri Yarn ve PNPM gibi.

Astro ile Geliştirici Deneyimini Geliştirme

Astro gibi Hepsi Bir Arada Çerçeveler, hızlı web siteleri geliştirmeyi olabildiğince sorunsuz hale getirir. Harika, UI-agnostik doğası, seçtiğiniz herhangi bir popüler JavaScript çerçevesiyle sıfır güçlükle çalışabileceğiniz anlamına gelir.