Odkrijte najnovejše v Svelte 4: izboljšana zmogljivost in poenostavljen razvoj

Z izdajo najnovejše različice, Svelte 4, je hvaljeno ogrodje JavaScript za razvoj spletnih aplikacij naredilo velik korak naprej. Ta posodobitev prinaša množico vznemirljivih izboljšav, s poudarkom na optimizaciji zmogljivosti in izboljšanju izkušnje razvijalcev.

Manjši in bolj neodvisen

Ena najbolj omembe vrednih izboljšav je znatno zmanjšanje celotne velikosti. Od zajetnih 10,6 MB je velikost Svelteja zdaj veliko manjša z 2,8 MB, kar pomeni impresivno zmanjšanje velikosti za 75 %.

Poleg tega ekipa, ki stoji za Izjemen JavaScript okvir je poenostavil število odvisnosti z 61 na 16. To zmanjšanje ima številne prednosti, vključno s hitrejšo izkušnjo REPL, izboljšano interaktivnostjo spletna mesta in izjemno hitrejša izvedba namestitve npm, ne glede na upravitelja paketov, ki ga raje.

Poleg optimizacije velikosti embalaže je Svelte tudi natančno prilagodil kodo, ki jo ustvari za hidracijo. Na primer, koda za spletno mesto SvelteKit je zdaj 110,2 kB s 126,3 kB, kar je 13-odstotno zmanjšanje.

Izboljšana izkušnja razvijalca

Svelte zdaj privzeto nastavi prehode na lokalne, kar zagotavlja, da privzeto niso globalni. To zmanjša tveganje motenj pri drugih prehodih in prepreči trke med nalaganjem strani, kar zagotavlja bolj gladko uporabniško izkušnjo.

Spletne komponente

Ustvarjanje spletnih komponent v Svelte je zdaj preprosto z uporabo novega oznaka:

"moja-komponenta" />

Medtem ko se je izkazalo, da je ta pristop enostaven za uporabo v preprostih primerih, je predstavljal omejitve za naprednejše scenariji, kot je nadzor nad tem, ali naj se posodobljene vrednosti prop odražajo v DOM, ali onemogočanje sence DOM.

Svelte 4 je revolucioniral avtorsko izkušnjo spletnih komponent z uvedbo namenskega atributa customElement v svelte: možnosti. Ta atribut vam omogoča konfiguracijo spletnih komponent z različnimi možnostmi:

 customElement={{
 oznaka: 'element po meri',
 senca: 'brez',
 rekviziti: {
 ime: {
 Odraža posodobljeno vrednost nazaj v DOM 
 odražati: prav,
 Odraža vrednost kot število 
 vrsta: 'Številka',
 Ime od atributa 
 atribut: 'element-index'
 }
 }
 }}
/>