Al desarrollar proyectos con Vite, es común que todos los recursos compilados se agrupen en un único directorio dist/assets por defecto, lo que puede dificultar la gestión de archivos a gran escala. Este artículo explora cómo configurar Vite para organizar la estructura de directorios de los activos generados, separando archivos JavaScript, CSS e imágenes en sus respectivas carpetas.

Principio de Funcionamiento

El proceso de empaquetado de Vite se apoya en Rollup. Para personalizar la ubicación de los archivos de salida, se utiliza la propiedad build.rollupOptions en la configuración de Vite, la cual permite pasar opciones directamente a Rollup. Específicamente, las opciones clave dentro de output son:

• entryFileNames: Define el patrón de nombre y ruta para los archivos JavaScript de entrada principales.
• chunkFileNames: Establece el patrón para los módulos JavaScript divididos (chunks) generados por el code splitting o lazy loading.
• assetFileNames: Determina el patrón para recursos no-JavaScript, como hojas de estilo, imágenes o fuentes.

Pasos de Configuración Detallados

1. Archivo de Configuración Principal

En el archivo vite.config.js (o vite.config.ts) en la raíz del proyecto, modifique la sección build.rollupOptions.output con las siguientes reglas:

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
 build: {
   rollupOptions: {
     output: {
       // Configuración para archivos JavaScript principales
       entryFileNames: 'js/[name]-[hash].js', 
       // Configuración para chunks JS de carga diferida
       chunkFileNames: 'js/[name]-[hash].js', 
       // Configuración para recursos no-JS
       assetFileNames: (assetInfo) => {
         const resourceName = assetInfo.name || '';
         const imageExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'];

         // Archivos CSS van a la carpeta 'css'
         if (resourceName.includes('.css')) {
           return 'css/[name]-[hash].[ext]';
         }
         
         // Imágenes van a la carpeta 'img'
         if (imageExtensions.some(ext => resourceName.toLowerCase().endsWith(ext))) {
           return 'img/[name]-[hash].[ext]'; 
         }

         // Cualquier otro tipo de recurso va a 'assets'
         return 'assets/[name]-[hash].[ext]'; 
       },
     },
   },
 },
});

2. Explicación de la Configuración

(1) Separación de Recursos JavaScript

La directiva entryFileNames dirige los archivos JavaScript de punto de entrada, como main.js, al directorio dist/js. El formato de nombre incluye un hash para control de caché. Similarmente, chunkFileNames asegura que los módulos JS generados por división de código o carga diferida también residan en dist/js, facilitando una gestión unificada.

(2) Clasificación de Recursos No-JavaScript

Mediante la función de assetFileNames, se implementa una lógica para clasificar los recursos:

• Los archivos con extensión .css se envían a dist/css.
• Las imágenes, identificadas por extensiones como .png, .jpg, .svg, etc., se ubican en dist/img.
• Cualquier otro tipo de archivo no clasificado (ej. fuentes, videos) se coloca por defecto en dist/assets.

(3) Uso de Marcadores de Posición

Los marcadores de posición utilizados en la configuración de Rollup tienen los siguientes significados:

• [name]: El nombre original del archivo de recurso, sin su extensión.
• [hash]: Un valor hash único generado a partir del contenido del archivo, crucial para la invalidación de caché en navegadores.
• [ext]: La extensión original del archivo, incluyendo el punto (ej., .css, .png).

Verificación del Resultado del Empaquetado

Después de ejecutar npm run build, la estructura del directorio dist debería ser similar a la siguiente:

dist/
├─ js/                 # Contiene todos los archivos JS
│  ├─ main-xxxx.js     # JS del punto de entrada
│  └─ vendor-xxxx.js   # Chunks JS de librerías o módulos
├─ css/                # Contiene los estilos CSS
│  └─ main-xxxx.css
├─ img/                # Contiene las imágenes
│  ├─ logo-xxxx.png
│  └─ icon-xxxx.svg
└─ assets/             # Contiene otros recursos
  └─ font-xxxx.ttf

Consideraciones Importantes

1. Compatibilidad: Es fundamental verificar la versión de Vite (preferiblemente 2.0 o superior) y Rollup, ya que la sintaxis de configuración puede variar entre versiones. Siempre se recomienda consultar la documentación oficial correspondiente.
2. Expansión de Tipos de Archivo: Para incluir nuevos tipos de recursos (como archivos de fuente .woff2 o videos), se puede modificar la lista imageExtensions o añadir nuevas condiciones dentro de la función assetFileNames.
3. Importancia del Hash: Mantener el marcador [hash] es crucial. Este identificador único garantiza que, al desplegar nuevas versiones de los recursos, los navegadores de los usuarios descarguen el contenido actualiazdo en lugar de servir versiones antiguas almacenadas en caché.