De Webpack a Vite: un viaje de migración sin sobresaltos

2022-09-05 3 min

Índice

1. ¿Por qué migrar? Los puntos débiles de Webpack

Webpack es un empaquetador de módulos extremadamente potente y configurable que durante años ha sido la base de los proyectos frontend. Sin embargo, a medida que los proyectos crecen, su idea central basada en el empaquetado también genera cuellos de botella de rendimiento:

Arranque en frío lento: Cada vez que se inicia el servidor de desarrollo (dev-server), Webpack debe recorrer todo el grafo de dependencias y empaquetar todos los módulos en memoria. En proyectos grandes, este proceso puede tardar varios minutos.
Actualizaciones en caliente (HMR) lentas: Cuando modificas un archivo, Webpack debe volver a calcular y sustituir los módulos relacionados. Aunque esto es más rápido que actualizar toda la página, en proyectos grandes la demora puede alcanzar varios segundos o incluso más de diez, interrumpiendo el flujo de desarrollo.

2. ¿Cómo resuelve Vite estos problemas?

Vite, cuyo nombre significa «rápido» en francés, toma otro camino. Aprovecha el soporte de los navegadores modernos para módulos ES nativos (ESM) y divide el proceso de compilación en dos partes:

Durante el desarrollo: Vite inicia un servidor sin empaquetar previamente todos los módulos. En su lugar, intercepta las peticiones de módulos del navegador y transforma y sirve el código fuente bajo demanda. Por ejemplo, el navegador solicita main.js y Vite lo entrega; main.js importa Button.vue, el navegador vuelve a enviar una petición y Vite entrega el Button.vue transformado. Así, el servidor de desarrollo arranca casi al instante.
En producción: Vite utiliza Rollup, otro empaquetador eficiente, para generar recursos estáticos muy optimizados.

Este modelo transforma por completo la experiencia de desarrollo, con un arranque fulminante y actualizaciones en caliente medidas en milisegundos.

3. Pasos prácticos para la migración

Migrar un proyecto existente de Webpack a Vite suele implicar los siguientes pasos:

a. Instalar dependencias y crear el archivo de configuración

Primero, instala Vite:

pnpm add -D vite @vitejs/plugin-react # 或 @vitejs/plugin-vue

Después, crea vite.config.js en la raíz del proyecto:

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react()],
})

b. Mover `index.html`

Webpack suele colocar index.html en el directorio public e inyecta automáticamente el JS empaquetado. Vite considera index.html como el punto de entrada de la aplicación. Debes moverlo a la raíz del proyecto y añadir manualmente la referencia al script:

<!-- /index.html -->
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

c. Sustituir los plugins de Webpack

Debes encontrar plugins de Vite equivalentes a los Loaders y Plugins de Webpack. El ecosistema de la comunidad es muy amplio y existen soluciones para la mayoría de las necesidades.

Webpack	Vite
`babel-loader`	`@vitejs/plugin-react` (Babel integrado)
`vue-loader`	`@vitejs/plugin-vue`
`file-loader`	Integrado en Vite
`webpack-dev-server`	Servidor de desarrollo integrado en Vite

d. Gestionar las variables de entorno

En Webpack estamos acostumbrados a utilizar process.env.NODE_ENV. En Vite, las variables de entorno se consultan mediante import.meta.env, por ejemplo import.meta.env.VITE_API_URL.

e. Configurar alias de rutas

Configurar alias de rutas en vite.config.js es muy sencillo:

import path from 'node:path'
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

4. Resultados tras la migración

Después de migrar a Vite, la impresión más inmediata es la velocidad.

El servidor de desarrollo pasó de tardar 50 segundos a 2 segundos en arrancar.
Las actualizaciones en caliente pasaron de una media de 3–5 segundos a unas decenas de milisegundos casi imperceptibles.
El archivo de configuración (vite.config.js) quedó mucho más sencillo que webpack.config.js.

Conclusión

Aunque durante la migración quizá haya que resolver algunos problemas de configuración propios del proyecto, pasar de Webpack a Vite mejora enormemente la experiencia de desarrollo. Si todavía soportas un proceso de compilación lento, este es el mejor momento para adoptar Vite.