Cuando un proyecto de JavaScript puro crece más allá de cientos de líneas en un solo archivo, mantenerlo se convierte en un problema real. Aquí se muestra cómo tomar una aplicación completa —sin frameworks, sin TypeScript, sin ningún proceso de empaquetamiento— y migrarla a Vite con ayuda de inteligencia artificial, logrando optimización automática, separación de archivos y una arquitectura profesional.
¿Por qué un proyecto Vanilla JavaScript necesita un empaquetador como Vite?
El proyecto de ejemplo es Free Habits, un tablero de seguimiento de hábitos construido con programación orientada a objetos y arrays avanzados [0:06]. Permite crear hábitos, marcar días cumplidos, ver estadísticas, filtrar y exportar datos. Todo funciona, pero tiene un problema crítico: todo el código vive en un solo archivo App.js con más de ochocientas líneas [1:08].
Sin un empaquetador, agregar funcionalidades hace que el archivo crezca sin control. No hay code splitting, no hay minificación, no hay eliminación de código muerto. Vite resuelve esto permitiendo dividir el código en múltiples archivos con export e import, y encargándose de transpilarlo, compilarlo y optimizarlo en un solo archivo listo para producción [1:30].
¿Cómo funciona el sistema de módulos con Vite?
Para que JavaScript pueda exportar e importar archivos, basta con agregar la palabra export a una clase o función. Luego, desde main.js, se usa import para traer ese módulo [2:06]. Vite resuelve todas esas importaciones automáticamente: optimiza, minifica y elimina código innecesario. Cada clase puede vivir en su propio archivo, haciendo el proyecto mucho más fácil de mantener.
¿Qué papel juega la IA en la migración?
Migrar archivo por archivo es un trabajo largo y repetitivo. En lugar de hacerlo manualmente, se utiliza un agente de IA dentro del editor (en este caso Cursor) para automatizar el proceso [3:24]. La clave está en dar contexto detallado al prompt:
- Se adjunta la carpeta completa del proyecto anterior como referencia (
old-app).
- Se indica que haga un refactor para usar Vite.
- Se pide mantener el
index.html con el div#app vacío y mover el render inicial a un template [4:25].
Entre más específico sea el prompt, mejor será el resultado.
¿Qué optimizaciones detecta la IA durante el refactor?
Uno de los hallazgos más interesantes es que la IA sugiere instalar Chart.js como dependencia en lugar de usar un CDN en el HTML [5:22]. Cuando trabajamos con empaquetadores, cargar librerías por CDN impide que el empaquetador aplique tree shaking —la técnica que elimina código no utilizado—. Instalar la librería con npm install permite que Vite analice qué partes se usan y optimice el resultado final.
La IA también se encarga de mover archivos estáticos (íconos, imágenes) a la carpeta public, que es donde Vite espera encontrar assets que no requieren procesamiento [6:40].
¿Cómo se logra una arquitectura profesional con el principio de responsabilidad única?
Tras la primera migración, el código seguía concentrado en un solo archivo grande. El segundo prompt solicita aplicar el principio de responsabilidad única y dividir App.js en archivos separados [8:32]. El resultado es una estructura que refleja lo que encontrarías en un proyecto profesional:
- Constantes en
index.js.
- Dominio con clases como
Habit y TypeHabit en una subcarpeta domain.
- Estado como
FilterState en su propio archivo.
- Repositorios separados:
InMemory, LocalStorage [9:10].
- Servicios, utilidades de UI (render, charts) y utilities generales.
Cada archivo queda pequeño, fácil de buscar y de mantener. El empaquetador se encarga de unir todo en producción.
¿Cuál es la diferencia entre modo desarrollo y modo producción?
Con npm run dev, Vite optimiza la experiencia de desarrollo con hot module replacement y recarga rápida [10:38]. Pero las optimizaciones completas ocurren al ejecutar npm run build: todo el CSS queda en un archivo, todo el JavaScript en otro, minificado y optimizado [11:00]. El resultado se guarda en la carpeta dist.
Para previsualizar el resultado productivo se usa npm run preview [11:32]. Al inspeccionar el código fuente, se confirma que los múltiples archivos de desarrollo se transformaron en un único archivo minificado.
¿Qué impacto tiene Vite en el rendimiento según Lighthouse?
Al correr un reporte de Lighthouse sobre la versión empaquetada con Vite, el puntaje de performance mejora considerablemente respecto a la versión sin optimizaciones [12:02]. A medida que el proyecto escale, Vite seguirá aplicando optimizaciones de forma automática. Además, su sistema de plugins permite agregar compresión, mejoras de SEO y otras técnicas sin intervención manual [12:38].
¿Ya has migrado algún proyecto a Vite o tienes dudas sobre el proceso? Comparte tu experiencia en los comentarios.
