Vite hizo algo de ruido en la comunidad frontend. Las descargas en npm se cuadruplicaron en el último año y sigue ganando popularidad.

Lo primero que lees sobre Vite en su sitio web es que significa "rápido" en francés. Vite promete un aumento significativo en el rendimiento, entonces, ¿cómo logra Vite eso?

Webpack y otros paquetes tradicionales funcionan con el antiguo enfoque de leer todo su código fuente y compilarlo en un par de archivos JS.

Han pasado varios años desde que la compatibilidad con ESM estuvo disponible en todos los navegadores principales, por lo que Vite adoptó un enfoque diferente. Alimenta su código fuente tal como está en su navegador y le permite manejar la importación de módulos por sí solo. Esto acelera significativamente el proceso de compilación porque la agrupación ya no es necesaria para el trabajo de desarrollo.

Pero como siempre, hay una trampa.

Los navegadores tardan en resolver los módulos nativos. Abrir un solo paquete es mucho más rápido que abrir cientos de dependencias. Entonces, ¿qué tan diferente es el rendimiento, en realidad? Hice algunos proyectos simulados con una cantidad diferente de archivos para ilustrar la diferencia en el rendimiento.

evaluación comparativa

Hice un script que genera automáticamente un proyecto listo para construir con Vite y Webpack, y también crea una cantidad preestablecida de componentes simulados que se representan en una sola página. Puede encontrar el enlace de GitHub aquí .

Comienzo un proyecto generado automáticamente npm starty registro dos métricas:

1. Tiempo para construir según lo informado por el empaquetador.
2. Tiempo de carga según lo informado por las herramientas de desarrollo de Chrome.

No es sorprendente que los navegadores no estén hechos para recuperar miles de archivos de manera eficiente en segundos. Porque, en realidad, no debería tener 5000 archivos en un paquete JS.

¡Dividir códigos al rescate!

En realidad, debe cargar el código JS sobre la marcha, cuando lo necesite. Su porción inicial debe ser lo más pequeña posible. Esto a menudo se hace a través del enrutamiento, cuando un enrutador maneja módulos con carga lenta cuando navega a una ruta que los necesita. Lea más en los documentos de React .

Con Vite y la división de código, su navegador solo obtendrá archivos JS en lotes pequeños, lo que resultará en un rendimiento mucho mejor.

Pero Webpack no se queda atrás como se podría pensar. Disponible desde 5.20, Webpack puede diferir la compilación de módulos importados dinámicamente. Con experiments.lazyCompilationla opción de configuración, el rendimiento de su compilación también puede mejorar drásticamente con la división de código.

¡Vamos a comparar entonces!

Esta vez, estoy usando los mismos proyectos generados automáticamente, pero esos cientos de componentes ahora se cargan de forma lenta, por lo que la parte inicial es básicamente un proyecto casi vacío.

Aquí están los resultados:

Esa es la misma imagen que teníamos con 10 archivos en el proyecto. Hay una diferencia de menos de un segundo, pero Vite gana aquí. ¡Lo cual no debería sorprender a nadie! Cuando carga casi todo de forma diferida, su tiempo de compilación inicial será el menor posible. Y si puede mantener todos sus fragmentos razonablemente pequeños, Vite seguirá brindándole los beneficios de las compilaciones rápidas.

Conclusión

Si puede dividir el código de su aplicación y mantener sus partes pequeñas, Vite le ahorrará medio segundo aquí y allá.

Pero Webpack no se queda atrás como podría pensarse, especialmente debido a innovaciones como lazyCompilationy swc-loader. Si su compilación de Webpack tarda más de 30 segundos, es posible que desee intentar primero optimizar su configuración con estas opciones más nuevas.

Webpack sigue siendo una buena opción si desea tener un soporte más amplio para casos de uso oscuros, o si su paquete inicial es enorme y no puede dividirlo.

Vite es el enfoque más moderno, con una instalación y configuración mucho más fáciles y un gran rendimiento desde el principio.

Al final, ¡siempre depende de ti y de tus necesidades!