W - I - Vite vs CRA

Vite

Es una herramienta de compilación que tiene como objetivo proporcionar una experiencia de desarrollo más rápida y ágil para proyectos web modernos. Consta de dos partes principales:

Un servidor de desarrollo que proporciona mejoras enriquecidas de funcionalidades sobre módulos ES nativos.
Un comando de compilación que empaqueta tu código con ROLLUP, preconfigurado para generar recursos estáticos altamente optimizados para producción.

CRA

CRA utiliza una herramienta de compilación de terceros llamada WEBPACK para manejar sus funcionalidades. Webpack es un empaquetador de módulos JavaScript al igual que Vite. Pero a diferencia de Vite, webpack admite más de un módulo listo para usar:

ESM
CommonJS
API de definición de módulo asíncrono (AMD)

Webpack utiliza cualquiera de estos sistemas de módulos JavaScript para combinar activos y módulos en uno o más activos estáticos, luego utiliza el servidor web Express.js y webpack-dev-server para servir contenido del activo empaquetado con soporte para HMR.

Proyecto en CRA

Cuando inicias un desarrollo CRA por primera vez, lo primero que hace webpack es usar el punto de entrada de la aplicación (el archivo) para crear un árbol de dependencias de todos los módulos del proyecto.index.js

Webpack repite el proceso de empaquetado cada vez que hay un cambio en el código. Como resultado, cuando su código fuente crece, todo se vuelve lento. El tiempo que se tarda en servir a un servidor de desarrollo y compilar sus proyectos aumenta significativamente.

Proyecto en Vite

Vite solo necesita preagrupar sus dependencias usando esbuild la primera vez que comienza el desarrollo antes de que comience a servir su aplicación.

Vite no necesita agrupar toda la aplicación o transpilar los módulos y el código antes de iniciar un servidor de desarrollo; la transpilación se realiza bajo demanda, lo que la hace significativamente más rápida que CRA.

Después de servir la aplicación, Vite utiliza la división de código basada en rutas para determinar qué parte del código debe cargarse, en lugar de reconstruir y volver a cargar toda la página como CRA.

Lo que esto significa es que el navegador leerá las instrucciones en el código y realizará solicitudes HTTP al servidor para cada importación. A continuación, el servidor de desarrollo intercepta las solicitudes y realiza la transformación del código cuando es necesario.

¿Por qué usar Vite?

Rendimiento superior

Durante el proceso de preempaquetado, Vite convierte las dependencias que se envían como CommonJS o UMD en ESM. Esta conversión se produce porque Vite solo admite ESM y sirve códigos ESM nativos de forma predeterminada.

Vite puede convertir dependencias con muchos módulos internos en un solo módulo para mejorar el rendimiento de carga de la página. Estos módulos tienden a disparar cientos de solicitudes al mismo tiempo, lo que podría crear congestión en el navegador y afectar negativamente el tiempo de carga. Pero, al preagrupar estas dependencias en un solo archivo, solo necesitan enviar una solicitud, lo que aumenta el rendimiento general.

Amplia compatibilidad con plugins

Vite aprovecha la interfaz del plugin Rollup para mejorar la experiencia de un desarrollador permitiéndoles confiar en el ecosistema maduro de plugins Rollup. En otras palabras, Vite es compatible con la mayoría de los complementos de Rollup listos para usar.

Actualizaciones más rápidas

En Vite, HMR se realiza sobre ESM nativo. Cuando se producen cambios en un módulo que acepta actualizaciones activas, Vite solo necesita invalidar con precisión el módulo. Esto da como resultado un tiempo de actualización de HMR más rápido, independientemente del tamaño de la aplicación.

Tiempo de compilación más rápido

Vite utiliza Rollup preconfigurado para crear aplicaciones para producción. Rollup es un empaquetador más eficiente que webpack, por lo que el tiempo de compilación de Vite tiende a ser más rápido que el de CRA, y su salida es más pequeña en tamaño.

Características enriquecidas

Vite proporciona soporte listo para usar para TypeScript, JSX, CSS y más.

Mecanografiado Vite admite la importación de archivos '.ts' listos para usar. Utiliza esbuild para transpilar TypeScript en JavaScript, que es aproximadamente 20 ~ 30 veces más rápido que Vanilla.
JSX Vite admite archivos '.jsx' y '.tsx' listos para usar. La transpilación JSX se maneja a través de ESBUILD.
.CSS La importación de archivos '.css' inyecta contenido a la página a través de una etiqueta '<style>' con soporte HMR. Vite proporciona soporte para archivos .scss, .sass, .less, .styl y .stylus, PostCSS y CSS. Módulos.
JSON Los archivos JSON se pueden importar directamente a Vite. También admite importaciones con nombre.
Importaciones dinámicas La importación dinámica con variables se puede utilizar con Vite.

A tener en cuenta

Hay algunas desventajas que debemos conocer.

Vite usa módulos de JavaScript por lo que las dependencias también deberían usarlas.
Vite puede transformar CommonJS en módulos JavaScript, exceptos algunos casos extremos.
Vite no puede crear paquetes destinados a navegadores antiguos.

Crear proyecto en Vite