Svelte raamistiku uusim versioon parandab jõudlust mitme uue funktsiooniga.

Oma uusima versiooni Svelte 4 väljalaskmisega on veebirakenduste arenduse tunnustatud JavaScripti raamistik astunud suure sammu edasi. See värskendus toob kaasa hulga põnevaid täiustusi, keskendudes peamiselt jõudluse optimeerimisele ja arendajakogemuse täiustamisele.

Väiksem ja sõltumatum

Üks tähelepanuväärsemaid täiustusi on üldise suuruse oluline vähenemine. Alates kopsakast 10,6 MB suurusest on Svelte nüüd palju õhem 2,8 MB, mis on muljetavaldav 75% väiksem.

Lisaks meeskond taga Svelte JavaScripti raamistik on muutnud sõltuvuste arvu 61-lt 16-le. Sellel vähendamisel on mitmeid eeliseid, sealhulgas kiirem REPL-i kogemus, täiustatud interaktiivsus veebisaite ja npm-i installimise märkimisväärselt kiiremat täitmist, olenemata teie paketihaldurist eelistada.

Lisaks pakendi suuruse optimeerimisele on Svelte viimistlenud ka hüdratatsiooni jaoks loodud koodi. Näiteks SvelteKiti veebisaidi kood on nüüd 110,2 kB 126,3 kB asemel, mis on 13% langus.

instagram viewer

Täiustatud arendajakogemus

Svelte määrab nüüd vaikimisi üleminekud kohalikele, tagades, et need pole vaikimisi globaalsed. See minimeerib teiste üleminekute häirete riski ja hoiab ära kokkupõrked lehe laadimise ajal, pakkudes sujuvamat kasutuskogemust.

Veebikomponendid

Veebikomponentide loomine Sveltes on nüüd lihtne, kasutades uut silt:

"minu komponent" />

Kuigi seda lähenemisviisi on lihtne kasutada lihtsatel juhtudel, seadis see piiranguid edasijõudnutele stsenaariumid, nagu kontrollimine, kas värskendatud propiväärtused peaksid kajastuma DOM-is, või varju keelamine DOM.

Svelte 4 on muutnud veebikomponentide loomise kogemust revolutsiooniliselt, võttes kasutusele spetsiaalse customElement atribuudi Svelte: valikud. See atribuut võimaldab teil konfigureerida veebikomponente erinevate suvanditega:

 customElement={{
 silt: "kohandatud element",
 vari: 'mitte ükski',
 rekvisiidid: {
 nimi: {
 Peegeldab värskendatud väärtust tagasi DOM-i 
 peegeldama: tõsi,
 Peegeldab väärtust kui arvu 
 tüüp: 'number',


 Atribuudi nimi 
 atribuut: 'element-index'
 }
 }
 }}
/>