5 Fitur Baru untuk Dicoba di Astro 2.5
Table of content:
AstroJS adalah alat berbasis JavaScript yang fantastis yang digunakan untuk membuat situs web statis supercepat. Ini memungkinkan Anda membuat situs web menggunakan beberapa kerangka kerja JavaScript seperti React, Vue, dan Svelte. Astro 2.5 menghadirkan serangkaian fitur baru yang beberapa di antaranya akan dibahas di sini.
1. Pengumpulan Data
Astro 2.5 sekarang mendukung penyimpanan JSON dan YAML dalam koleksi. Tipe baru: properti ‘data’ mengaktifkan fungsi ini. Untuk mendemonstrasikan ini, buat kumpulan data ‘penulis’ di folder src/content, di mana JSON atau YAML file dapat ditambahkan.
Selanjutnya, konfigurasikan koleksi di src/content/config.ts menggunakan defineCollection Dan z utilitas dari astro: konten modul dan mengatur tipe ke data.
Baca Juga:
import { z, defineCollection } from "astro:content";
const writers = defineCollection({
type: "data",
schema: z.object({ name: z.string() }),
});
Terakhir, ekspor objek koleksi untuk mendaftarkan koleksi Anda.
export const collections = {writers:writers}
2. Minifikasi HTML
Astro 2.5 memperkenalkan opsi kompresHTML yang menghapus semua spasi putih (dan jeda baris) dari HTML Anda. Komponen dikompresi hanya sekali oleh kompiler Astro dan kemudian selama pembuatan. Hal ini dilakukan untuk menekan biaya kinerja.
Mengaktifkan opsi ini di proyek Anda mudah. Cukup tambahkan baris berikut ke file konfigurasi Anda. Minifikasi HTML hanya berfungsi dengan komponen yang ditulis dalam format file .astro.
export default defineConfig({compressHTML:true})
3. Rendering Paralel
Merender komponen secara paralel adalah fitur yang sudah lama ditunggu-tunggu di Astro. Dalam kasus di mana komponen turunan dalam subpohon yang berbeda mengambil data, Astro 2.5 meningkatkan waktu pemuatan dengan mengambil data secara paralel.
Hal ini memungkinkan komponen yang lebih rendah di pohon untuk dirender tanpa diblokir oleh komponen pengambilan data yang lebih tinggi di pohon. Saat ini, rendering paralel tidak berfungsi dengan baik array.peta fragmen asinkron.
Astro 2.5 juga menghadirkan serangkaian fitur eksperimental baru yang dicakup di bawah ini.
4. Render Hibrid
Astro 2.5 sekarang memungkinkan Anda untuk menentukan opsi output server baru di file konfigurasi Anda yang menggantikan perilaku pra-render default SSR.
Untuk memanfaatkan rendering hybrid, atur hybridOutput ke true di bagian eksperimental konfigurasi Anda dan tambahkan adaptor.
Melakukan ini akan melakukan pra-render seluruh situs Anda secara default, tetapi Anda dapat menyisih dari perilaku ini dengan menyetel prarender ekspor rute atau halaman apa pun ke false:
export const prerender = false; 5. Arahan Klien Khusus
Astro 2.5 memperkenalkan API addClientDirective untuk kontrol hidrasi komponen sisi klien kustom menggunakan custom klien:* arahan.
Untuk menggunakan fitur ini, Aktifkan eksperimental.customClientDirectives dalam file konfigurasi dan pertahankan titik masuk arahan seminimal mungkin untuk menghindari dampak negatif apa pun pada hidrasi komponen.
Fungsi tipe ClientDirective harus diekspor dari file arahan klien Anda. Misalnya, kode berikut menghidrasi komponen pada klik pertama di jendela.
import { ClientDirective } from "astro";
const clickDirective: ClientDirective = (load, opts, el) => {
window.addEventListener(
"click",
async () => {
const hydrate = await load();
await hydrate();
},
{ once: true }
);
};
export default clickDirective;
Sekarang klien: klik dapat digunakan dalam komponen Anda dengan dukungan tipe penuh.
Cara Memasang Astro
Astro menyediakan Command Line Interface (CLI) yang disebut membuat astro untuk membantu Anda memulai. Anda harus menginstal NodeJS 16+ dan npm di mesin Anda.
npm create astro@latest Ini akan merancah proyek Astro baru dari awal. Ikuti petunjuk di layar untuk mengatur semuanya (jika Anda tidak yakin apa yang harus dipilih, ikuti saja opsi yang disarankan). Berikutnya, CD ke dalam folder proyek, lalu jalankan:
npm run dev
Anda dapat menambahkan kerangka kerja seperti Bereaksi, menggunakan astro menambahkan. Jika semuanya terpasang dengan benar, Anda dapat membuka host lokal: 3000 di mesin Anda, dan Anda akan melihat pesan “Welcome to Astro”.
Jika Anda tidak menyukai NPM, Anda dapat memilih Pengelola Paket JavaScript lainnya seperti Yarn dan PNPM.
Meningkatkan Pengalaman Pengembang Dengan Astro
Kerangka All-in-one seperti Astro membuat pengembangan situs web cepat semulus mungkin. Ini luar biasa, sifat UI-agnostik berarti Anda dapat bekerja dengan kerangka kerja JavaScript populer apa pun pilihan Anda tanpa kerumitan.
Artikel Terkait
