La versione più recente del framework Svelte migliora le prestazioni con diverse nuove funzionalità.
Con il rilascio della sua ultima versione, Svelte 4, l'acclamato framework JavaScript per lo sviluppo di applicazioni web ha fatto un grande passo avanti. Questo aggiornamento apporta una serie di miglioramenti entusiasmanti, con un focus principale sull'ottimizzazione delle prestazioni e sul miglioramento dell'esperienza degli sviluppatori.
Più piccolo e più indipendente
Uno dei miglioramenti più degni di nota è la sostanziale riduzione delle dimensioni complessive. Da un pesante 10,6 MB, la dimensione di Svelte è ora molto più sottile di 2,8 MB, un'impressionante riduzione delle dimensioni del 75%.
Inoltre, il team dietro il Svelto framework JavaScript ha semplificato il numero di dipendenze da 61 a 16. Questa riduzione ha molteplici vantaggi, tra cui un'esperienza REPL più veloce, una maggiore interattività su siti Web e un'esecuzione notevolmente più rapida di npm install, indipendentemente dal gestore di pacchetti you preferire.
Oltre all'ottimizzazione delle dimensioni del pacchetto, Svelte ha anche messo a punto il codice che genera per l'idratazione. Ad esempio, il codice per il sito Web SvelteKit è ora di 110,2 kB da 126,3 kB, con una diminuzione del 13%.
Esperienza degli sviluppatori migliorata
Svelte ora imposta le transizioni su locale per impostazione predefinita, assicurandosi che non siano globali per impostazione predefinita. Ciò riduce al minimo il rischio di interferenze con altre transizioni e impedisce collisioni durante il caricamento della pagina, fornendo un'esperienza utente più fluida.
Componenti web
La creazione di componenti Web in Svelte è ora semplice utilizzando il nuovo etichetta:
"mio-componente" /> Sebbene questo approccio si sia dimostrato facile da usare in casi semplici, ha posto dei limiti per quelli più avanzati scenari come controllare se i valori prop aggiornati dovrebbero riflettersi nel DOM o disabilitare l'ombra DOM.
Svelte 4 ha rivoluzionato l'esperienza di creazione di Web Components con l'introduzione di un attributo customElement dedicato in snello: opzioni. Questo attributo consente di configurare Web Components con varie opzioni:
elementopersonalizzato={{
etichetta: 'elemento personalizzato',
ombra: 'nessuno',
oggetti di scena: {
nome: {
Riflette il valore aggiornato nel DOM
riflettere: VERO,Riflette il valore come un numero
tipo: 'Numero',Nome di l'attributo
attributo: 'indice-elemento'
}
}
}}
/>