De nieuwste versie van het Svelte-framework verbetert de prestaties met verschillende nieuwe functies.

Met de release van de nieuwste versie, Svelte 4, heeft het veelgeprezen JavaScript-framework voor de ontwikkeling van webapplicaties een grote stap voorwaarts gemaakt. Deze update brengt een groot aantal opwindende verbeteringen, met een primaire focus op het optimaliseren van de prestaties en het verbeteren van de ontwikkelaarservaring.

Kleiner en onafhankelijker

Een van de meest opmerkelijke verbeteringen is de aanzienlijke verkleining van de totale omvang. Van een forse 10,6 MB is de grootte van Svelte nu een veel slankere 2,8 MB, een indrukwekkende afname van 75%.

Daarnaast is het team achter de Slank JavaScript-framework heeft het aantal afhankelijkheden gestroomlijnd van 61 naar 16. Deze reductie heeft meerdere voordelen, waaronder een snellere REPL-ervaring, verbeterde interactiviteit op websites en opmerkelijk snellere uitvoering van npm-installatie, ongeacht de pakketbeheerder die u gebruikt de voorkeur geven aan.

instagram viewer

Naast optimalisatie van de pakketgrootte heeft Svelte ook de code die het genereert voor hydratatie verfijnd. De code voor de SvelteKit-website is nu bijvoorbeeld 110,2 kB in plaats van 126,3 kB, een daling van 13%.

Verbeterde ontwikkelaarservaring

Svelte stelt overgangen nu standaard in op lokaal, zodat ze niet standaard globaal zijn. Dit minimaliseert het risico op interferentie met andere overgangen en voorkomt botsingen tijdens het laden van pagina's, wat zorgt voor een soepelere gebruikerservaring.

Webcomponenten

Het maken van webcomponenten in Svelte is nu eenvoudig met het nieuwe label:

"mijn-component" />

Hoewel deze benadering in eenvoudige gevallen gemakkelijk te gebruiken is gebleken, stelde ze beperkingen voor meer gevorderden scenario's zoals het bepalen of bijgewerkte propwaarden moeten worden weergegeven in de DOM of het uitschakelen van de schaduw DOM.

Svelte 4 heeft een revolutie teweeggebracht in de ontwerpervaring van webcomponenten met de introductie van een speciaal customElement-attribuut in slank: opties. Met dit attribuut kunt u Web Components configureren met verschillende opties:

 customElement={{
 label: 'custom-element',
 schaduw: 'geen',
 rekwisieten: {
 naam: {
 Reflecteert de bijgewerkte waarde terug naar de DOM 
 weerspiegelen: WAAR,
 Geeft de waarde weer als een getal 
 type: 'Nummer',


 Naam van het attribuut 
 attribuut: 'element-index'
 }
 }
 }}
/>