Den nyeste version af Svelte-rammeværket forbedrer ydeevnen med flere nye funktioner.

Med udgivelsen af ​​sin seneste version, Svelte 4, har den anerkendte JavaScript-ramme til udvikling af webapplikationer taget et stort skridt fremad. Denne opdatering bringer et væld af spændende forbedringer med primært fokus på at optimere ydeevnen og forbedre udvikleroplevelsen.

Mindre og mere uafhængig

En af de mest bemærkelsesværdige forbedringer er den betydelige reduktion i den samlede størrelse. Fra heftige 10,6 MB er Sveltes størrelse nu meget slankere 2,8 MB, et imponerende fald på 75 % i størrelse.

Derudover har holdet bag Svelte JavaScript-ramme har strømlinet antallet af afhængigheder fra 61 til 16. Denne reduktion har flere fordele, herunder en hurtigere REPL-oplevelse, forbedret interaktivitet på websteder og bemærkelsesværdigt hurtigere udførelse af npm-installation, uanset hvilken pakkehåndtering du har foretrække.

Ud over pakkestørrelsesoptimering har Svelte også finjusteret den kode, den genererer til hydrering. For eksempel er koden til SvelteKit-webstedet nu 110,2 kB fra 126,3 kB, et fald på 13 %.

instagram viewer

Forbedret udvikleroplevelse

Svelte indstiller nu overgange til lokal som standard, og sikrer, at de ikke er globale som standard. Dette minimerer risikoen for interferens med andre overgange og forhindrer kollisioner under sideindlæsning, hvilket giver en mere jævn brugeroplevelse.

Webkomponenter

At oprette webkomponenter i Svelte er nu ligetil ved at bruge det nye tag:

"min-komponent" />

Selvom denne tilgang har vist sig nem at bruge i simple tilfælde, udgjorde den begrænsninger for mere avancerede scenarier som at kontrollere, om opdaterede prop-værdier skal afspejles i DOM eller deaktivere skyggen DOM.

Svelte 4 har revolutioneret forfatteroplevelsen af ​​webkomponenter med introduktionen af ​​en dedikeret customElement-attribut i svelte: muligheder. Denne attribut lader dig konfigurere webkomponenter med forskellige muligheder:

 customElement={{
 tag: 'custom-element',
 skygge: 'ingen',
 rekvisitter: {
 navn: {
 Afspejler den opdaterede værdi tilbage til DOM 
 afspejle: rigtigt,
 Afspejler værdien som et tal 
 type: 'Nummer',


 Navn på attributten 
 attribut: 'element-indeks'
 }
 }
 }}
/>