El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Caché

Siguiente ►
►

El caché es una técnica esencial para mejorar el rendimiento de las aplicaciones web. En el contexto de Webpack, el caché se utiliza para almacenar los módulos compilados y otros recursos, de manera que no sea necesario recompilarlos cada vez que se realiza una nueva construcción. Esto puede acelerar significativamente el tiempo de construcción y mejorar la experiencia del desarrollador.

Conceptos Clave

  1. Caché de Módulos: Almacena los módulos compilados para evitar recompilaciones innecesarias.
  2. Hashing: Genera identificadores únicos para los archivos, permitiendo a los navegadores almacenar en caché los archivos sin riesgo de servir versiones obsoletas.
  3. Cache-Control Headers: Configura las cabeceras HTTP para controlar cómo los navegadores y proxies almacenan en caché los recursos.

Configuración de Caché en Webpack

  1. Caché de Módulos

Webpack permite habilitar el caché de módulos para mejorar el rendimiento de la construcción. Esto se puede hacer mediante la configuración cache.

// webpack.config.js
module.exports = {
  // Otras configuraciones...
  cache: {
    type: 'filesystem', // Utiliza el sistema de archivos para almacenar el caché
  },
};

  1. Hashing

El uso de hashes en los nombres de los archivos de salida es crucial para el almacenamiento en caché efectivo. Webpack permite configurar esto mediante la propiedad output.filename.

// webpack.config.js
const path = require('path');

module.exports = {
  // Otras configuraciones...
  output: {
    filename: '[name].[contenthash].js', // Utiliza contenthash para generar un hash basado en el contenido del archivo
    path: path.resolve(__dirname, 'dist'),
    clean: true, // Limpia la carpeta de salida antes de cada construcción
  },
};

  1. Cache-Control Headers

Para controlar cómo los navegadores almacenan en caché los recursos, puedes configurar las cabeceras HTTP en tu servidor web. Aquí hay un ejemplo de configuración para un servidor Express:

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(path.join(__dirname, 'dist'), {
  maxAge: '1y', // Almacena en caché los archivos por un año
  etag: false, // Desactiva ETag
}));

app.listen(3000, () => {
  console.log('Servidor corriendo en http://localhost:3000');
});

Ejemplo Práctico

Vamos a crear un proyecto simple que utilice el caché de Webpack.

Paso 1: Configuración del Proyecto

  1. Crea una carpeta para tu proyecto y navega a ella.
  2. Inicializa un nuevo proyecto npm: 
    npm init -y
  3. Instala Webpack y Webpack CLI: 
    npm install webpack webpack-cli --save-dev

Paso 2: Estructura del Proyecto

Crea la siguiente estructura de carpetas y archivos:

/my-webpack-cache-project
  /src
    index.js
  /dist
  package.json
  webpack.config.js

Paso 3: Configuración de Webpack

Edita webpack.config.js para incluir la configuración de caché y hashing:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  cache: {
    type: 'filesystem',
  },
  mode: 'production',
};

Paso 4: Archivo de Entrada

Edita src/index.js para incluir un simple mensaje de consola:

console.log('Hello, Webpack with Caching!');

Paso 5: Construcción del Proyecto

Construye el proyecto utilizando Webpack:

npx webpack

Paso 6: Servir los Archivos

Utiliza un servidor estático para servir los archivos en la carpeta dist. Puedes usar http-server para esto:

npx http-server ./dist

Navega a http://localhost:8080 y verifica que el archivo JavaScript se carga correctamente.

Ejercicio Práctico

Ejercicio 1: Implementar Caché de Módulos

  1. Modifica el archivo webpack.config.js para habilitar el caché de módulos.
  2. Realiza una construcción inicial y observa el tiempo de construcción.
  3. Realiza una segunda construcción sin cambiar ningún archivo y compara el tiempo de construcción con la primera.

Solución

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  cache: {
    type: 'filesystem',
  },
  mode: 'production',
};

Conclusión

El uso del caché en Webpack es una técnica poderosa para mejorar el rendimiento de las construcciones y la experiencia del desarrollador. Al habilitar el caché de módulos y utilizar hashes en los nombres de los archivos de salida, puedes asegurarte de que los navegadores almacenen en caché los recursos de manera efectiva, reduciendo el tiempo de carga y mejorando la experiencia del usuario final.

En el siguiente tema, exploraremos el concepto de Tree Shaking, una técnica para eliminar código muerto y optimizar aún más nuestras construcciones de Webpack.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados