Svelte çerçevesinin en yeni sürümü, birkaç yeni özellikle performansı artırır.

En son sürümü olan Svelte 4'ün piyasaya sürülmesiyle, web uygulaması geliştirmeye yönelik beğeni toplayan JavaScript çerçevesi ileriye doğru büyük bir adım attı. Bu güncelleme, öncelikli olarak performansı optimize etmeye ve geliştirici deneyimini geliştirmeye odaklanan bir dizi heyecan verici iyileştirme getiriyor.

Daha Küçük ve Daha Bağımsız

En dikkate değer geliştirmelerden biri, genel boyuttaki önemli azalmadır. 10,6 MB gibi devasa bir boyuttan, Svelte'nin boyutu şimdi 2,8 MB ile çok daha ince, %75'lik etkileyici bir küçülme.

Ayrıca, arkasındaki ekip Gelişmiş JavaScript çerçevesi bağımlılık sayısını 61'den 16'ya indirdi. Bu azalma, daha hızlı bir REPL deneyimi, geliştirilmiş etkileşim dahil olmak üzere birçok avantaja sahiptir. web siteleri ve kullandığınız paket yöneticisinden bağımsız olarak npm kurulumunun oldukça hızlı yürütülmesi tercih etmek.

Svelte, paket boyutu optimizasyonunun ötesinde, hidrasyon için ürettiği kodda da ince ayar yaptı. Örneğin, SvelteKit web sitesinin kodu 126,3 kB'den şimdi 110,2 kB, yani %13'lük bir düşüş.

instagram viewer

Gelişmiş Geliştirici Deneyimi

Svelte artık geçişleri varsayılan olarak yerel olarak ayarlayarak bunların varsayılan olarak küresel olmamalarını sağlar. Bu, diğer geçişlerle karışma riskini en aza indirir ve sayfa yükleme sırasında çarpışmaları önleyerek daha sorunsuz bir kullanıcı deneyimi sağlar.

Web Bileşenleri

Svelte'de Web Bileşenleri oluşturmak artık yeni etiket:

"bileşenim" />

Bu yaklaşımın basit durumlarda kullanımının kolay olduğu kanıtlanmış olsa da, daha gelişmiş durumlar için sınırlamalar getirdi. güncellenmiş prop değerlerinin DOM'a yansıtılıp yansıtılmayacağını kontrol etme veya gölgeyi devre dışı bırakma gibi senaryolar DOM.

Svelte 4, özel bir customElement özelliğinin tanıtılmasıyla Web Bileşenlerinin yazma deneyiminde devrim yarattı. incelik: seçenekler. Bu öznitelik, Web Bileşenlerini çeşitli seçeneklerle yapılandırmanıza izin verir:

 özel Öğe={{
 etiket: "özel öğe",
 gölge: 'hiçbiri',
 aksesuarlar: {
 isim: {
 Güncellenen değeri DOM'a geri yansıtır 
 yansıtmak: doğru,
 Değeri bir sayı as olarak yansıtır 
 tip: 'Sayı',


 Özelliğin of adı 
 bağlanmak: 'element indeksi'
 }
 }
 }}
/>