Najnovšia verzia rámca Svelte zlepšuje výkon niekoľkými novými funkciami.

S vydaním najnovšej verzie Svelte 4, uznávaný rámec JavaScriptu pre vývoj webových aplikácií, urobil veľký krok vpred. Táto aktualizácia prináša množstvo vzrušujúcich vylepšení s primárnym zameraním na optimalizáciu výkonu a zlepšenie zážitku pre vývojárov.

Menší a nezávislejší

Jedným z najpozoruhodnejších vylepšení je podstatné zníženie celkovej veľkosti. Zo statných 10,6 MB je veľkosť Svelte teraz oveľa tenšia, 2,8 MB, čo predstavuje pôsobivý 75% pokles veľkosti.

Okrem toho tím za Štýlový rámec JavaScriptu zefektívnil počet závislostí zo 61 na 16. Toto zníženie má viacero výhod, vrátane rýchlejšieho zážitku REPL, vylepšenej interaktivity webové stránky a pozoruhodne rýchlejšie spustenie inštalácie npm, bez ohľadu na správcu balíkov preferovať.

Okrem optimalizácie veľkosti balenia Svelte tiež doladil kód, ktorý generuje na hydratáciu. Napríklad kód pre webovú stránku SvelteKit je teraz 110,2 kB z 126,3 kB, čo je o 13 % menej.

instagram viewer

Vylepšené skúsenosti vývojárov

Svelte teraz predvolene nastavuje prechody na lokálne, čím zabezpečuje, že predvolene nie sú globálne. Tým sa minimalizuje riziko rušenia s inými prechodmi a predchádza sa kolíziám počas načítania stránky, čo poskytuje plynulejší používateľský zážitok.

Webové komponenty

Vytváranie webových komponentov v Svelte je teraz jednoduché pomocou nového značka:

"moja súčasť" />

Aj keď sa tento prístup ukázal ako ľahko použiteľný v jednoduchých prípadoch, pre pokročilejších predstavoval obmedzenia scenáre, ako je kontrola, či sa majú aktualizované hodnoty prop odrážať v DOM, alebo vypnutie tieňa DOM.

Svelte 4 spôsobil revolúciu v oblasti tvorby webových komponentov zavedením špeciálneho atribútu customElement v štíhly: možnosti. Tento atribút vám umožňuje konfigurovať webové komponenty s rôznymi možnosťami:

 customElement={{
 značka: 'vlastný prvok',
 tieň: 'žiadny',
 rekvizity: {
 názov: {
 Odráža aktualizovanú hodnotu späť do modelu DOM 
 odrážať: pravda,
 Odráža hodnotu ako číslo 
 typ: 'číslo',


 Názov z atribútu 
 atribút: 'element-index'
 }
 }
 }}
/>