La versión más reciente del marco Svelte mejora el rendimiento con varias funciones nuevas.
Con el lanzamiento de su última versión, Svelte 4, el aclamado marco de JavaScript para el desarrollo de aplicaciones web ha dado un gran paso adelante. Esta actualización trae una gran cantidad de mejoras emocionantes, con un enfoque principal en optimizar el rendimiento y mejorar la experiencia del desarrollador.
Más pequeño y más independiente
Una de las mejoras más notables es la reducción sustancial del tamaño total. De unos considerables 10,6 MB, el tamaño de Svelte ahora es mucho más delgado de 2,8 MB, una impresionante disminución del tamaño del 75%.
Además, el equipo detrás de la Marco JavaScript esbelto ha simplificado el número de dependencias de 61 a 16. Esta reducción tiene múltiples ventajas, incluida una experiencia REPL más rápida, interactividad mejorada en sitios web y una ejecución notablemente más rápida de la instalación de npm, independientemente del administrador de paquetes que utilice. preferir.
Más allá de la optimización del tamaño del paquete, Svelte también ha perfeccionado el código que genera para la hidratación. Por ejemplo, el código del sitio web de SvelteKit ahora ocupa 110,2 kB desde 126,3 kB, una disminución del 13 %.
Experiencia de desarrollador mejorada
Svelte ahora establece las transiciones en local de forma predeterminada, asegurándose de que no sean globales de forma predeterminada. Esto minimiza el riesgo de interferencia con otras transiciones y evita colisiones durante la carga de la página, proporcionando una experiencia de usuario más fluida.
Componentes web
La creación de componentes web en Svelte ahora es sencilla utilizando el nuevo etiqueta:
"mi-componente" /> Si bien este enfoque ha demostrado ser fácil de usar en casos simples, planteó limitaciones para casos más avanzados. escenarios como controlar si los valores de propiedad actualizados deben reflejarse en el DOM o deshabilitar la sombra DOM.
Svelte 4 ha revolucionado la experiencia de creación de componentes web con la introducción de un atributo customElement dedicado en esbelto: opciones. Este atributo le permite configurar Web Components con varias opciones:
elemento personalizado={{
etiqueta: 'elemento personalizado',
sombra: 'ninguno',
accesorios: {
nombre: {
Refleja el valor actualizado de vuelta al DOM
reflejar: verdadero,Refleja el valor como un número
tipo: 'Número',Nombre de el atributo
atributo: 'elemento-índice'
}
}
}}
/>
