Optimización del proceso de compilación

Durante el desarrollo, ejecuta un servidor de desarrollo con recarga en caliente. Para publicar la aplicación, cree una compilación de producción optimizada: un conjunto de archivos estáticos ajustados para ofrecer velocidad y ocupar poco espacio, listos para desplegarse en cualquier servidor.

El comando estándar compila su aplicación para producción. Vite (la herramienta predeterminada para Vue 3) compila, empaqueta y optimiza todo.

La compilación escribe archivos optimizados en una carpeta dist: un index.html, bundles de JavaScript y CSS con hash, y sus recursos estáticos. Esta carpeta es la que debe desplegar.

La minificación elimina espacios en blanco y comentarios, y acorta los nombres de variables para que los archivos se descarguen más rápido. Las compilaciones de producción minifican automáticamente JavaScript y CSS.

El tree-shaking elimina el código que nunca utiliza. Si importa una función de una biblioteca, el empaquetador descarta el resto. Use importaciones con nombre de módulos ES para permitir que funcione el tree-shaking.

Los nombres de archivo del resultado de la compilación incluyen un hash del contenido, como index-a1b2c3.js. Cuando cambia el código, cambia el hash, por lo que los navegadores descargan el archivo nuevo y almacenan en caché de forma agresiva los que no han cambiado.

Para ver qué ocupa espacio en su bundle, use un plugin visualizador. Este genera un gráfico interactivo que muestra qué módulos ocupan más espacio y le orienta en la optimización.

Una dependencia grande que apenas utiliza es una señal de alerta. El análisis podría revelar una biblioteca pesada de fechas o gráficos que puede sustituir por una alternativa más pequeña o cargar de forma diferida.

Vite expone las variables de entorno con el prefijo VITE_ mediante import.meta.env. Úselas para configurar las URL de API y los indicadores de funcionalidad según el entorno.

Vite carga .env.production durante npm run build y .env.development durante npm run dev, por lo que cada entorno obtiene automáticamente la configuración correcta.

Antes de desplegarla, ejecute una previsualización local de la compilación de producción para confirmar que funciona como espera con archivos optimizados reales.

Compruebe sus conocimientos sobre el proceso de compilación.

Ejecute npm run build para producir una carpeta dist optimizada con recursos minificados, sometidos a tree-shaking y con hash de contenido. Analice el tamaño del bundle para reducir las dependencias pesadas y use variables de entorno VITE_ con archivos .env para configurar cada entorno. Previsualice la aplicación antes de publicarla. A continuación, desplegará esta compilación en una plataforma de alojamiento.