Den nyeste versjonen av Svelte-rammeverket forbedrer ytelsen med flere nye funksjoner.
Med utgivelsen av sin nyeste versjon, Svelte 4, har det anerkjente JavaScript-rammeverket for utvikling av nettapplikasjoner tatt et stort skritt fremover. Denne oppdateringen gir en rekke spennende forbedringer, med hovedfokus på å optimalisere ytelsen og forbedre utvikleropplevelsen.
Mindre og mer uavhengig
En av de mest bemerkelsesverdige forbedringene er den betydelige reduksjonen i total størrelse. Fra heftige 10,6 MB er Sveltes størrelse nå mye slankere 2,8 MB, en imponerende reduksjon på 75 %.
I tillegg har teamet bak Svelte JavaScript-rammeverk har strømlinjeformet antall avhengigheter fra 61 til 16. Denne reduksjonen har flere fordeler, inkludert en raskere REPL-opplevelse, forbedret interaktivitet på nettsteder, og bemerkelsesverdig raskere utførelse av npm-installasjon, uavhengig av pakkebehandleren du foretrekker.
Utover pakkestørrelsesoptimalisering har Svelte også finjustert koden den genererer for hydrering. For eksempel er koden for SvelteKit-nettstedet nå 110,2 kB fra 126,3 kB, en nedgang på 13 %.
Forbedret utvikleropplevelse
Svelte setter nå overganger til lokale som standard, og sikrer at de ikke er globale som standard. Dette minimerer risikoen for interferens med andre overganger og forhindrer kollisjoner under sideinnlasting, noe som gir en jevnere brukeropplevelse.
Webkomponenter
Å lage nettkomponenter i Svelte er nå enkelt å bruke det nye stikkord:
"min-komponent" /> Selv om denne tilnærmingen har vist seg enkel å bruke i enkle tilfeller, ga den begrensninger for mer avanserte scenarier som å kontrollere om oppdaterte prop-verdier skal reflekteres i DOM eller deaktivere skyggen DOM.
Svelte 4 har revolusjonert forfatteropplevelsen til webkomponenter med introduksjonen av et dedikert customElement-attributt i svelte: alternativer. Dette attributtet lar deg konfigurere webkomponenter med ulike alternativer:
customElement={{
stikkord: 'tilpasset-element',
skygge: 'ingen',
Rekvisitter: {
Navn: {
Gjenspeiler den oppdaterte verdien tilbake til DOM
reflektere: ekte,Gjenspeiler verdien som et tall
type: 'Antall',Navn på attributtet
Egenskap: 'element-indeks'
}
}
}}
/>
