Cuando tu aplicación llega a producción, uno de los mayores retos es garantizar que el navegador sirva siempre la versión correcta de cada archivo. Agregar hashes a los nombres de los assets resuelve este problema al generar un identificador único por cada build, lo que permite un cacheo eficiente y evita que los usuarios vean versiones desactualizadas.
¿Cómo agregar hashes a los archivos en Webpack?
El proceso comienza en el archivo webpack.config.js. La idea es reutilizar la constante que determina si estamos en entorno de desarrollo o producción (isDev) y aplicarla en la propiedad del nombre de salida de cada archivo [0:10].
- En desarrollo, el nombre del archivo se mantiene igual (por ejemplo,
main.js).
- En producción, se agrega un guion seguido de
[hash] entre corchetes.
Los corchetes son fundamentales porque es la sintaxis que Webpack interpreta para inyectar el hash del build en el nombre del archivo. Esta misma validación se aplica donde se extrae el CSS [0:41]: si es desarrollo se conserva el nombre original, y si es producción se concatena [hash].
Al ejecutar npm run build, los assets generados incluyen ese identificador único al final del nombre. Es el hash del build de Webpack, lo que garantiza que cada vez que cambie el código, el nombre del archivo también cambiará y el navegador descargará la versión nueva.
¿Qué es el webpack manifest plugin y para qué sirve?
Una vez que los archivos tienen hashes dinámicos, necesitamos una forma de saber exactamente cómo se llama cada uno. Aquí entra el paquete webpack-manifest-plugin [1:16].
Se instala como dependencia y se importa en la configuración:
javascript
const manifestPlugin = require('webpack-manifest-plugin');
Este plugin solo se usa en producción. Dentro del arreglo de plugins, se valida isDev: si estamos en desarrollo se pasa una función vacía, y si estamos en producción se instancia manifestPlugin [1:36].
Al construir el proyecto, dentro de la carpeta public/assets aparece un archivo llamado manifest.json [1:54]. Este archivo mapea el nombre original del asset (sin hash) hacia su ruta final con el hash incluido. Es la referencia que el servidor necesita para cargar el archivo correcto.
¿Cómo leer el manifest desde el servidor?
Para acceder al manifest.json desde Node, se crea una función llamada getManifest [2:18]. Esta función utiliza el módulo file system (fs) de Node, indispensable para leer archivos del sistema de directorios.
javascript
import fs from 'fs';
const getManifest = () => {
try {
return JSON.parse(fs.readFileSync(${__dirname}/public/manifest.json));
} catch (error) {
console.log(error);
}
};
export default getManifest;
Se utiliza un bloque try-catch porque el proceso puede fallar si el archivo no existe o hay un problema de lectura [2:38]. Dentro del try, se retorna el resultado de JSON.parse aplicado sobre readFileSync, que lee el archivo de forma síncrona.
¿Cómo integrar el manifest con Express mediante un middleware?
En server.js se importa getManifest y se crea un middleware con app.use [3:17]. Un middleware recibe tres parámetros: request, response y next.
javascript
app.use((req, res, next) => {
if (!req.hashManifest) {
req.hashManifest = getManifest();
}
next();
});
Esta lógica verifica si req.hashManifest ya existe. Si no, lee el manifest una sola vez y lo almacena en el objeto request. Después llama a next() para continuar con el flujo normal de la aplicación [3:40].
Finalmente, en la función setResponse se recibe el manifest como tercer parámetro y se definen dos constantes [4:04]:
- mainStyles: busca en el manifest la entrada
main.css; si no existe, usa la ruta por defecto.
- mainBuild: busca
main.js con la misma lógica.
Estas referencias reemplazan las rutas estáticas en el HTML, asegurando que en producción se sirvan los archivos con su hash correcto [4:36].
Al ejecutar npm run build y levantar el servidor, en la pestaña de sources del navegador se puede confirmar que los archivos se cargan con el hash en su nombre. Esto significa que el cacheo del navegador funcionará correctamente: solo descargará archivos nuevos cuando el hash cambie.
Dominar esta configuración complementa técnicas como la minificación de assets y la compresión GZ, formando un flujo completo de optimización para producción. ¿Has implementado alguna estrategia adicional de cacheo en tus proyectos? Comparte tu experiencia en los comentarios.
