Naujausia „Svelte“ sistemos versija pagerina našumą su keliomis naujomis funkcijomis.

Išleidus naujausią versiją „Svelte 4“, pripažinta „JavaScript“ sistema, skirta žiniatinklio programų kūrimui, žengė didelį žingsnį į priekį. Šis naujinimas suteikia daugybę jaudinančių patobulinimų, daugiausia dėmesio skiriant našumo optimizavimui ir kūrėjo patirties gerinimui.

Mažesnis ir nepriklausomesnis

Vienas iš labiausiai pastebimų patobulinimų yra didelis bendro dydžio sumažinimas. Nuo didžiulio 10,6 MB „Svelte“ dydis dabar yra daug plonesnis – 2,8 MB, o tai įspūdingai sumažėjo 75 %.

Be to, komanda už Svelte JavaScript sistema supaprastino priklausomybių skaičių nuo 61 iki 16. Šis sumažinimas turi daug privalumų, įskaitant greitesnę REPL patirtį, patobulintą interaktyvumą svetaines ir nepaprastai greitesnį npm diegimo vykdymą, nepaisant jūsų paketų tvarkyklės teikia pirmenybę.

Be pakuotės dydžio optimizavimo, „Svelte“ taip pat tiksliai sureguliavo kodą, kurį generuoja drėkinimui. Pavyzdžiui, SvelteKit svetainės kodas dabar yra 110,2 kB nuo 126,3 kB, tai yra 13 % sumažėjimas.

instagram viewer

Patobulinta kūrėjo patirtis

„Svelte“ dabar pagal numatytuosius nustatymus nustato vietinius perėjimus, užtikrinant, kad jie nebūtų visuotiniai pagal numatytuosius nustatymus. Taip sumažinama kitų perėjimų trukdžių rizika ir išvengiama susidūrimų įkeliant puslapį, todėl naudotojas veiktų sklandžiau.

Žiniatinklio komponentai

Sukurti žiniatinklio komponentus „Svelte“ dabar paprasta naudojant naują žyma:

„mano komponentas“ />

Nors šį metodą lengva naudoti paprastais atvejais, jis apribojo pažangesnius scenarijai, pvz., valdymas, ar atnaujintos rekvizito reikšmės turi atsispindėti DOM, arba šešėlio išjungimas DOM.

„Svelte 4“ pakeitė žiniatinklio komponentų kūrimo patirtį, įdiegdama specialų „customElement“ atributą. Svelte: parinktys. Šis atributas leidžia konfigūruoti žiniatinklio komponentus įvairiomis parinktimis:

 customElement={{
 žyma: „priskirtas elementas“,
 šešėlis: 'nė vienas',
 rekvizitas: {
 vardas: {
 Atspindi atnaujintą reikšmę DOM 
 atspindi: tiesa,
 Atspindi reikšmę kaip skaičių 
 tipas: "Skaičius",


 Atributo pavadinimas 
 atributas: 'element-index'
 }
 }
 }}
/>