A Svelte keretrendszer legújabb verziója számos új funkcióval javítja a teljesítményt.

Legújabb verziójának, a Svelte 4-nek a megjelenésével a webalkalmazások fejlesztésére szolgáló, elismert JavaScript-keretrendszer nagy lépést tett előre. Ez a frissítés számos izgalmas fejlesztést tartalmaz, elsősorban a teljesítmény optimalizálására és a fejlesztői élmény javítására összpontosítva.

Kisebb és függetlenebb

Az egyik legfigyelemreméltóbb fejlesztés a teljes méret jelentős csökkenése. A tetemes 10,6 MB-ról a Svelte mérete most sokkal karcsúbb, 2,8 MB, ami lenyűgöző, 75%-os méretcsökkenést jelent.

Ezenkívül a mögött álló csapat Svelte JavaScript keretrendszer 61-ről 16-ra egyszerűsítette a függőségek számát. Ez a csökkentés számos előnnyel jár, beleértve a gyorsabb REPL-élményt és a fokozott interaktivitást webhelyekre, és az npm telepítés figyelemreméltóan gyorsabb végrehajtására, a csomagkezelőtől függetlenül jobban szeret.

A csomagméret-optimalizáláson túl a Svelte finomhangolta a hidratáláshoz generált kódot is. Például a SvelteKit webhely kódja most 110,2 kB 126,3 kB helyett, ami 13%-os csökkenést jelent.

instagram viewer

Továbbfejlesztett fejlesztői élmény

A Svelte mostantól alapértelmezés szerint helyire állítja az átmeneteket, biztosítva, hogy alapértelmezés szerint ne globálisak legyenek. Ez minimálisra csökkenti a többi átmenettel való interferencia kockázatát, és megakadályozza az ütközéseket az oldalbetöltés során, simább felhasználói élményt biztosítva.

Webes összetevők

A webes összetevők létrehozása a Svelte-ben most már egyszerű az új használatával címke:

"én-komponens" />

Bár ez a megközelítés egyszerű esetekben könnyen használhatónak bizonyult, korlátokat szabott a haladóbbak számára forgatókönyvek, például annak szabályozása, hogy a frissített prop értékek tükröződjenek-e a DOM-ban, vagy az árnyék letiltása DOM.

A Svelte 4 egy dedikált customElement attribútum bevezetésével forradalmasította a webkomponensek készítési élményét. karcsú: opciók. Ez az attribútum lehetővé teszi a webkomponensek konfigurálását különféle beállításokkal:

 customElement={{
 címke: "egyedi elem",
 árnyék: 'egyik sem',
 kellékek: {
 név: {
 A frissített értéket tükrözi vissza a DOM-ra 
 tükrözi: igaz,
 Az értéket számként tükrözi 
 típus: 'Szám',


 Az attribútum neve 
 tulajdonság: "elem-index"
 }
 }
 }}
/>