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

División de Código

Siguiente ►
►

La división de código (code splitting) es una técnica avanzada en Webpack que permite dividir el código de tu aplicación en varios archivos más pequeños. Esto puede mejorar significativamente el rendimiento de tu aplicación al reducir el tamaño de los archivos que se cargan inicialmente y permitir la carga diferida de partes del código cuando sean necesarias.

¿Por qué es Importante la División de Código?

  1. Mejora del Rendimiento: Al dividir el código, puedes cargar solo lo que es necesario para la página inicial, reduciendo el tiempo de carga.
  2. Carga Diferida: Permite cargar partes del código bajo demanda, lo que es especialmente útil para aplicaciones grandes.
  3. Mejor Mantenimiento: Facilita la gestión y el mantenimiento del código al dividirlo en módulos más pequeños y manejables.

Métodos de División de Código en Webpack

  1. División de Código por Entradas

Puedes dividir el código especificando múltiples puntos de entrada en tu archivo de configuración de Webpack.

// webpack.config.js
module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

En este ejemplo, Webpack generará dos archivos de salida: app.bundle.js y admin.bundle.js.

  1. División de Código Dinámica

La división de código dinámica permite dividir el código en módulos que se cargan bajo demanda utilizando la función import().

// src/app.js
function loadComponent() {
  import('./component.js').then(module => {
    const component = module.default;
    document.body.appendChild(component());
  });
}

document.getElementById('loadButton').addEventListener('click', loadComponent);

En este ejemplo, el módulo component.js se cargará solo cuando el usuario haga clic en el botón.

  1. División de Código Automática

Webpack puede dividir automáticamente el código utilizando la opción optimization.splitChunks.

// webpack.config.js
module.exports = {
  // ... otras configuraciones
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

Esta configuración dividirá automáticamente el código en varios archivos más pequeños basándose en ciertas condiciones, como el tamaño del archivo y la reutilización del módulo.

Ejemplo Práctico

Vamos a crear un ejemplo práctico para ilustrar la división de código dinámica.

Paso 1: Configuración del Proyecto

  1. Crea un nuevo proyecto y navega a su directorio.
  2. Inicializa un proyecto de Node.js y añade Webpack.
mkdir code-splitting-example
cd code-splitting-example
npm init -y
npm install webpack webpack-cli --save-dev

Paso 2: Estructura del Proyecto

Crea la siguiente estructura de archivos:

code-splitting-example/
├── src/
│   ├── index.js
│   ├── component.js
├── dist/
├── webpack.config.js
├── package.json

Paso 3: Código de los Archivos

src/index.js

function loadComponent() {
  import('./component.js').then(module => {
    const component = module.default;
    document.body.appendChild(component());
  });
}

document.getElementById('loadButton').addEventListener('click', loadComponent);

src/component.js

export default function() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello, Webpack!';
  return element;
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
};

Paso 4: Compilación y Ejecución

  1. Añade un script en package.json para ejecutar Webpack.
"scripts": {
  "build": "webpack"
}
  1. Ejecuta el script de compilación.
npm run build
  1. Crea un archivo index.html en el directorio dist para probar la aplicación.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code Splitting Example</title>
</head>
<body>
  <button id="loadButton">Load Component</button>
  <script src="bundle.js"></script>
</body>
</html>
  1. Abre index.html en un navegador y haz clic en el botón para cargar el componente dinámicamente.

Ejercicio Práctico

Ejercicio

  1. Modifica el ejemplo anterior para que cargue dos componentes diferentes (componentA.js y componentB.js) cuando se hagan clic en dos botones diferentes (loadButtonA y loadButtonB).

Solución

Estructura del Proyecto

code-splitting-example/
├── src/
│   ├── index.js
│   ├── componentA.js
│   ├── componentB.js
├── dist/
├── webpack.config.js
├── package.json

src/index.js

function loadComponentA() {
  import('./componentA.js').then(module => {
    const component = module.default;
    document.body.appendChild(component());
  });
}

function loadComponentB() {
  import('./componentB.js').then(module => {
    const component = module.default;
    document.body.appendChild(component());
  });
}

document.getElementById('loadButtonA').addEventListener('click', loadComponentA);
document.getElementById('loadButtonB').addEventListener('click', loadComponentB);

src/componentA.js

export default function() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello, Component A!';
  return element;
}

src/componentB.js

export default function() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello, Component B!';
  return element;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code Splitting Example</title>
</head>
<body>
  <button id="loadButtonA">Load Component A</button>
  <button id="loadButtonB">Load Component B</button>
  <script src="bundle.js"></script>
</body>
</html>

Resumen

En esta sección, hemos aprendido sobre la división de código en Webpack y cómo puede mejorar el rendimiento de nuestras aplicaciones. Hemos explorado diferentes métodos para dividir el código, incluyendo la división por entradas, la división dinámica y la división automática. Además, hemos implementado un ejemplo práctico y un ejercicio para reforzar los conceptos aprendidos.

En el siguiente tema, exploraremos cómo gestionar el caché en Webpack para mejorar aún más el rendimiento de nuestras aplicaciones.

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