Vite: un empaquetador 100 veces más rápido que Webpack

Al finalizar este tema

Comprenderá por qué es necesario el empaquetado y podrá explicar por qué Vite es más rápido que Webpack.

Primero, ¿por qué es necesario el empaquetado?

Antes, bastaba con crear un archivo HTML, uno CSS y uno JavaScript, y subirlos al servidor.

Pero hoy en día, al ejecutar npm install react, se genera una carpeta node_modules, que contiene decenas de megabytes de código fuente de React. No se pueden subir directamente al servidor en ese formato.

Además, los archivos JavaScript se importan entre sí mediante import, y los navegadores antiguos no admitían la sintaxis import.

El empaquetado resuelve este problema. Combina varios archivos JavaScript en uno solo, elimina el código innecesario y transforma el resultado en un formato que el navegador pueda ejecutar.

Los problemas de Webpack

El empaquetador más popular es Webpack. Funciona bien, pero cuando el proyecto crece, surgen problemas.

Para previsualizarlo, es necesario empaquetar todo el proyecto. Cuantas más bibliotecas haya, más tiempo tarda, pudiendo llegar a 5 segundos, 10 segundos o incluso decenas de segundos. Si se modifica una línea de código y se quiere ver el resultado, hay que esperar de nuevo.

Iniciar un proyecto de React creado con Webpack tarda entre 5 y 6 segundos. Esperar este tiempo cada vez que se modifica el código hace que se dediquen decenas de minutos al día solo al empaquetado.

Dos razones por las que Vite es rápido

Vite (que significa "rápido" en francés) resolvió este problema con dos principios.

Primero, realiza un preempaquetado con esbuild.

Webpack está escrito en JavaScript y es lento. Para la tarea de transformar previamente las bibliotecas, Vite utiliza una herramienta llamada esbuild. Esbuild está escrito en Go y es hasta 100 veces más rápido.

Segundo, no empaqueta el código fuente.

Los navegadores modernos admiten de forma nativa la sintaxis import (ESM). Vite aprovecha esto para enviar los archivos al navegador tal cual, sin combinarlos. Al no haber empaquetado, es naturalmente más rápido.

¿Se modifica el código? Solo hay que volver a enviar el archivo modificado. Esto se llama HMR (Hot Module Replacement). Webpack también admite HMR, pero Vite es más rápido.

Resultado:

Inicio de la vista previa de Webpack: ~5 segundos
Inicio de la vista previa de Vite:    ~0.3 segundos

Cómo empezar

npm create vite@latest my-app
cd my-app
npm install
npm run dev

Con estas cuatro líneas, se crea un proyecto de Vite y se muestra una vista previa. Puedes seleccionar el framework que desees como plantilla: React, Vue, Svelte, etc.

La forma de escribir código es la misma que en los proyectos de Webpack: crear componentes, importar y desplegar; todo es igual. La única diferencia es que el proceso de empaquetado es más rápido.

¿Qué se usaba antes de Vite?

Si revisamos brevemente la historia de las herramientas de compilación para el frontend:

Create React App (CRA) utiliza Webpack internamente, por lo que los desarrolladores de React, aunque no configuren Webpack directamente, en realidad lo están utilizando. A partir de 2023, al dejar de recomendar CRA, el estándar para iniciar nuevos proyectos ha pasado a ser Vite o Next.js.

Como referencia, Vite se pronuncia "vit". Significa "rápido" en francés y fue creado por Evan You, el creador de Vue.js. Es una herramienta versátil que admite no solo Vue, sino también React, Svelte e incluso Vanilla JS. El hecho de no depender de un framework específico es una de las ventajas de Vite.

Puntos clave

El empaquetado (bundling) es el proceso de combinar varios archivos JS en uno, y Webpack era la herramienta más utilizada. Vite ha mejorado significativamente la velocidad mediante esbuild (preprocesamiento 100 veces más rápido) + ESM (omisión del empaquetado del código fuente). La forma de escribir código no cambia; solo se cambia la herramienta.