La dernière version du framework Svelte améliore les performances avec plusieurs nouvelles fonctionnalités.
Avec la sortie de sa dernière version, Svelte 4, le célèbre framework JavaScript pour le développement d'applications Web a fait un grand pas en avant. Cette mise à jour apporte une foule d'améliorations passionnantes, avec un accent principal sur l'optimisation des performances et l'amélioration de l'expérience des développeurs.
Plus petit et plus indépendant
L'une des améliorations les plus remarquables est la réduction substantielle de la taille globale. D'un lourd 10,6 Mo, la taille de Svelte est maintenant beaucoup plus mince de 2,8 Mo, une réduction impressionnante de 75 % de la taille.
De plus, l'équipe derrière le Framework JavaScript svelte a rationalisé le nombre de dépendances de 61 à 16. Cette réduction présente de multiples avantages, notamment une expérience REPL plus rapide, une interactivité améliorée sur sites Web et une exécution remarquablement plus rapide de l'installation de npm, quel que soit le gestionnaire de packages que vous préférer.
Au-delà de l'optimisation de la taille de l'emballage, Svelte a également affiné le code qu'il génère pour l'hydratation. Par exemple, le code du site Web SvelteKit est désormais de 126,3 ko à 110,2 ko, soit une diminution de 13 %.
Expérience de développeur améliorée
Svelte définit désormais les transitions sur local par défaut, en veillant à ce qu'elles ne soient pas globales par défaut. Cela minimise le risque d'interférence avec d'autres transitions et évite les collisions lors du chargement de la page, offrant une expérience utilisateur plus fluide.
Composants Web
La création de composants Web dans Svelte est désormais simple grâce au nouveau étiqueter:
"mon-composant" /> Si cette approche s'est avérée facile à utiliser dans des cas simples, elle posait des limites pour des applications plus avancées. des scénarios comme contrôler si les valeurs prop mises à jour doivent se refléter dans le DOM ou désactiver l'ombre DOM.
Svelte 4 a révolutionné l'expérience de création de composants Web avec l'introduction d'un attribut customElement dédié dans svelte: options. Cet attribut vous permet de configurer les composants Web avec différentes options :
customElement={{
étiqueter: 'élément personnalisé',
ombre: 'aucun',
accessoires: {
nom: {
Reflète la valeur mise à jour dans le DOM
refléter: vrai,Reflète la valeur comme un nombre
taper: 'Nombre',Nommez de l'attribut
attribut: 'indice d'élément'
}
}
}}
/>
