Svelte-kehyksen uusin versio parantaa suorituskykyä useilla uusilla ominaisuuksilla.

Uusimman version, Svelte 4, julkaisun myötä kehuttu JavaScript-kehys verkkosovellusten kehittämiseen on ottanut suuren harppauksen eteenpäin. Tämä päivitys tuo joukon jännittäviä parannuksia, jotka keskittyvät ensisijaisesti suorituskyvyn optimointiin ja kehittäjäkokemuksen parantamiseen.

Pienempi ja itsenäisempi

Yksi merkittävimmistä parannuksista on kokonaiskoon huomattava pienentyminen. Kovasta 10,6 Mt: sta Svelten koko on nyt paljon ohuempi 2,8 Mt, mikä on vaikuttava 75 % pienempi koko.

Lisäksi takana oleva joukkue Svelte JavaScript-kehys on virtaviivaistanut riippuvuuksien määrän 61:stä 16:een. Tällä vähennyksellä on useita etuja, kuten nopeampi REPL-kokemus, parannettu vuorovaikutus päällä Web-sivustot ja huomattavasti nopeampi npm-asennuksen suorittaminen paketinhallinnasta riippumatta mieluummin.

Pakkauksen koon optimoinnin lisäksi Svelte on myös hienosäätänyt kosteutta varten luomaansa koodia. Esimerkiksi SvelteKit-verkkosivuston koodi on nyt 110,2 kt 126,3 kt: sta, mikä on 13 % laskua.

instagram viewer

Parannettu kehittäjäkokemus

Svelte asettaa nyt oletusarvoisesti siirtymät paikallisiksi varmistaen, että ne eivät ole oletuksena globaaleja. Tämä minimoi muiden siirtymien häiriöiden riskin ja estää törmäykset sivun latauksen aikana, mikä tarjoaa sujuvamman käyttökokemuksen.

Web-komponentit

Verkkokomponenttien luominen Sveltessä on nyt yksinkertaista käyttämällä uutta tag:

"oma-komponentti" />

Vaikka tämä lähestymistapa on osoittautunut helpoksi käyttää yksinkertaisissa tapauksissa, se asetti rajoituksia edistyneemmille skenaariot, kuten sen hallinta, pitäisikö päivitettyjen prop-arvojen näkyä DOM: ssa tai varjon poistaminen käytöstä DOM.

Svelte 4 on mullistanut verkkokomponenttien luontikokemuksen ottamalla käyttöön omistetun customElement-attribuutin hoikka: vaihtoehdot. Tämän attribuutin avulla voit määrittää verkkokomponentit eri vaihtoehdoilla:

 customElement={{
 tag: "mukautettu elementti",
 varjo: 'ei mitään',
 rekvisiitta: {
 nimi: {
 Heijastaa päivitetyn arvon takaisin DOM: iin 
 heijastaa: totta,
 Heijastaa arvon  numerona 
 tyyppi: 'Määrä',


 Attribuutin nimi 
 attribuutti: 'element-index'
 }
 }
 }}
/>