Configuración Avanzada de Webpack para Separar Código y Dependencias

Curso de Webpack con Express.js, React.js y TypeScript

Contenido del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:08

Configuración Avanzada de Webpack para Separar Código y Dependencias

Curso de Webpack con Express.js, React.js y TypeScript

Clase 18 de 22

Clase 18 / 22

Recursos

¿Cómo dividir el proyecto en elementos más pequeños?

Dividir tu proyecto en elementos más pequeños y manejables no solo mejora el mantenimiento del código, sino que también optimiza el rendimiento general de la aplicación. Vamos a sacar provecho de la configuración de webpack para separar las dependencias y el código común de nuestro proyecto. A continuación, te comparto cómo llevar a cabo esta separación y las ventajas de hacerlo.

¿Cómo configurar webpack para la producción?

Para preparar nuestra aplicación para producción, debemos ajustar la configuración de webpack. Haremos cambios precisos para actualizar los puntos de entrada y nombrar adecuadamente nuestros archivos.

// Ejemplo de configuración de puntos de entrada y nombres de archivo
module.exports = {
  entry: {
    home: './src/index.js',
    header: './src/header/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  }
};

¿Qué es la estrategia de "Split Chunks"?

La optimización es clave y el uso de split chunks en webpack nos ayuda a segmentar el código en partes reutilizables y a evitar la duplicación. Esto se centra en los "commons" y "vendors".

¿Cómo configurar SplitChunks?

Primero, configuramos los commons y vendors dentro de nuestra sección de optimización, bien diferenciados para su uso eficiente.

// Configuración de SplitChunks
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
        name: 'commons',
        chunks: 'all',
        reuseExistingChunk: true,
        priority: 20,
      },
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
        priority: 10,
      }
    }
  }
}

¿Cómo solucionar y prevenir problemas comunes?

Durante la configuración, es fácil cometer errores tipográficos o de sintaxis. Asegúrate de revisar los errores en la consola que podrían prevenir que tu aplicación se compile correctamente.

Valida aperturas y cierres en tu regex.
Asegúrate de que los nombres de parámetros estén bien escritos, como chunks en vez de chons.
Comprueba que todas las dependencias estén correctamente definidas.

¿Cómo ejecutar y verificar la configuración?

Después de establecer la configuración correcta, es momento de compilar la aplicación en modo producción. Usa el siguiente comando:

npm run build

Esto generará los archivos divididos y optimizados que podrás verificar en el directorio de dist. Al revisar estos archivos, notarás:

commons.js y vendors.js reúnen el código común y las librerías de terceros, respectivamente.
Los archivos específicos como header.js y home.js se encuentran separados, facilitando la organización del código.

Valor de una buena separación de código

La separación de la aplicación en diferentes elementos mejora la gestión y rendimiento, además de facilitar las futuras actualizaciones y mantenimientos. Sin embargo, recuerda que este es un proceso iterativo: revisa constantemente tus configuraciones y actualízalas conforme cambien las necesidades del proyecto.

¡Sigue explorando estas configuraciones avanzadas y lleva tus aplicaciones al siguiente nivel!

Resumen

¿Cómo dividir el proyecto en elementos más pequeños?

¿Cómo configurar webpack para la producción?

// Ejemplo de configuración de puntos de entrada y nombres de archivo
module.exports = {
  entry: {
    home: './src/index.js',
    header: './src/header/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  }
};

¿Qué es la estrategia de "Split Chunks"?

La optimización es clave y el uso de split chunks en webpack nos ayuda a segmentar el código en partes reutilizables y a evitar la duplicación. Esto se centra en los "commons" y "vendors".

¿Cómo configurar SplitChunks?

Primero, configuramos los commons y vendors dentro de nuestra sección de optimización, bien diferenciados para su uso eficiente.

// Configuración de SplitChunks
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
        name: 'commons',
        chunks: 'all',
        reuseExistingChunk: true,
        priority: 20,
      },
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
        priority: 10,
      }
    }
  }
}

¿Cómo solucionar y prevenir problemas comunes?

Durante la configuración, es fácil cometer errores tipográficos o de sintaxis. Asegúrate de revisar los errores en la consola que podrían prevenir que tu aplicación se compile correctamente.

Valida aperturas y cierres en tu regex.
Asegúrate de que los nombres de parámetros estén bien escritos, como chunks en vez de chons.
Comprueba que todas las dependencias estén correctamente definidas.

¿Cómo ejecutar y verificar la configuración?

Después de establecer la configuración correcta, es momento de compilar la aplicación en modo producción. Usa el siguiente comando:

npm run build

Esto generará los archivos divididos y optimizados que podrás verificar en el directorio de dist. Al revisar estos archivos, notarás:

commons.js y vendors.js reúnen el código común y las librerías de terceros, respectivamente.
Los archivos específicos como header.js y home.js se encuentran separados, facilitando la organización del código.

Valor de una buena separación de código

¡Sigue explorando estas configuraciones avanzadas y lleva tus aplicaciones al siguiente nivel!

Introducción

Migración y Configuración Avanzada de Webpack 5 con TypeScript

Configuración y Optimización de Proyectos con Webpack y TypeScript

Webpack en el Backend

Configuración Básica de Express y Webpack para Proyectos Node.js

Configuración de Webpack para Proyectos con Express

Migración de Aplicaciones Node.js a TypeScript paso a paso

Configuración de API Rest con TypeScript y JSON para Platzi Store

Webpack en el Frontend

Migración y Optimización de Proyectos con Webpack 5

Configuración de Webpack para Desarrollo y Producción en React

Creación de Hooks para Consumo de APIs en React con Axios

"Implementación de Context en React para Gestión de Estado"

Configuración de Alias en Webpack para Proyectos JavaScript

Optimización de Imágenes y Uso de CDN en Proyectos Web

Optimización de Imágenes PNG con Image Minimiser Webpack Plugin

Configuración de TypeScript en React con Webpack

Configuración de Hot Reload en Webpack con React

División de Código con Lazy Loading en React

División de Código con Webpack y Micro Frontend en React

Configuración Avanzada de Webpack para Separar Código y Dependencias

Despliegue

Despliegue de Aplicaciones Web con Netlify y GitHub

Despliegue de API en Heroku con Express y TypeScript

Conexión de un Dominio Personalizado a Netlify y Cloudflare

Migración de Wetpack y Optimización para Producción

Configuración Avanzada de Webpack para Separar Código y Dependencias

Progreso del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Recursos

Recursos