Upptäck det senaste inom Svelte 4: Förbättrad prestanda och strömlinjeformad utveckling

Med lanseringen av sin senaste version, Svelte 4, har det hyllade JavaScript-ramverket för webbapplikationsutveckling tagit ett stort kliv framåt. Den här uppdateringen ger en mängd spännande förbättringar, med ett primärt fokus på att optimera prestanda och förbättra utvecklarupplevelsen.

Mindre och mer oberoende

En av de mest anmärkningsvärda förbättringarna är den avsevärda minskningen av den totala storleken. Från rejäla 10,6 MB är Sveltes storlek nu mycket smalare 2,8 MB, en imponerande minskning av storleken med 75 %.

Dessutom har teamet bakom Svelte JavaScript-ramverk har effektiviserat antalet beroenden från 61 till 16. Denna minskning har flera fördelar, inklusive en snabbare REPL-upplevelse, förbättrad interaktivitet på webbplatser och anmärkningsvärt snabbare exekvering av npm installation, oavsett vilken pakethanterare du är föredra.

Utöver optimering av paketstorlek har Svelte också finjusterat koden den genererar för hydrering. Till exempel är koden för SvelteKit-webbplatsen nu 110,2 kB från 126,3 kB, en minskning med 13 %.

Förbättrad utvecklarupplevelse

Svelte ställer nu in övergångar till lokala som standard, och säkerställer att de inte är globala som standard. Detta minimerar risken för interferens med andra övergångar och förhindrar kollisioner under sidladdning, vilket ger en smidigare användarupplevelse.

Webbkomponenter

Att skapa webbkomponenter i Svelte är nu enkelt med det nya märka:

"min-komponent" />

Även om detta tillvägagångssätt har visat sig vara lätt att använda i enkla fall, innebar det begränsningar för mer avancerade scenarier som att kontrollera om uppdaterade prop-värden ska återspeglas i DOM eller inaktivera skuggan DOM.

Svelte 4 har revolutionerat författarupplevelsen av webbkomponenter med introduktionen av ett dedikerat customElement-attribut i svelte: alternativ. Det här attributet låter dig konfigurera webbkomponenter med olika alternativ:

 customElement={{
 märka: 'custom-element',
 skugga: 'ingen',
 rekvisita: {
 namn: {
 Återspeglar det uppdaterade värdet tillbaka till DOM 
 reflektera: Sann,
 Visar värdet som ett tal 
 typ: 'Siffra',
 Namn på attributet 
 attribut: 'element-index'
 }
 }
 }}
/>