Versi terbaru framework Svelte meningkatkan performa dengan beberapa fitur baru.

Dengan dirilisnya versi terbarunya, Svelte 4, framework JavaScript yang diakui untuk pengembangan aplikasi web telah mengambil langkah maju yang besar. Pembaruan ini menghadirkan sejumlah peningkatan yang mendebarkan, dengan fokus utama pada pengoptimalan kinerja dan peningkatan pengalaman pengembang.

Lebih Kecil dan Lebih Mandiri

Salah satu peningkatan yang paling penting adalah pengurangan substansial dalam ukuran keseluruhan. Dari 10,6 MB yang lumayan, ukuran Svelte sekarang jauh lebih ramping 2,8 MB, penurunan ukuran yang mengesankan sebesar 75%.

Selain itu, tim di belakang Kerangka kerja JavaScript yang ramping telah merampingkan jumlah dependensi dari 61 menjadi 16. Pengurangan ini memiliki banyak keuntungan, termasuk pengalaman REPL yang lebih cepat, interaktivitas yang ditingkatkan situs web, dan eksekusi instalasi npm yang jauh lebih cepat, terlepas dari manajer paket Anda lebih menyukai.

Di luar pengoptimalan ukuran paket, Svelte juga menyempurnakan kode yang dihasilkannya untuk hidrasi. Misalnya, kode untuk situs web SvelteKit sekarang menjadi 110,2 kB dari 126,3 kB, turun 13%.

instagram viewer

Pengalaman Pengembang yang Disempurnakan

Langsing sekarang menyetel transisi ke lokal secara default, memastikan bahwa transisi tersebut tidak bersifat global secara default. Ini meminimalkan risiko interferensi dengan transisi lain dan mencegah tabrakan selama pemuatan halaman, memberikan pengalaman pengguna yang lebih lancar.

Komponen Web

Membuat Komponen Web di Svelte sekarang mudah menggunakan yang baru menandai:

"komponen saya" />

Sementara pendekatan ini telah terbukti mudah digunakan dalam kasus-kasus sederhana, itu menimbulkan keterbatasan untuk lebih maju skenario seperti mengontrol apakah nilai prop yang diperbarui harus tercermin dalam DOM atau menonaktifkan bayangan DOM.

Svelte 4 telah merevolusi pengalaman pembuatan Komponen Web dengan pengenalan atribut customElement khusus di langsing: opsi. Atribut ini memungkinkan Anda mengonfigurasi Komponen Web dengan berbagai opsi:

 customElement={{
 menandai: 'elemen kustom',
 bayangan: 'tidak ada',
 Atribut: {
 nama: {
 Mencerminkan nilai yang diperbarui kembali ke DOM 
 mencerminkan: BENAR,
 Mencerminkan nilai sebagai angka 
 jenis: 'Nomor',


 Beri nama dari atribut 
 atribut: 'elemen-indeks'
 }
 }
 }}
/>