Optimización de Proyectos con Webpack: Minificación y Hashing

Contenido del curso

Introducción a Webpack

Proyecto inicial

Loaders y Plugins en Webpack

Deploy del proyecto

Herramientas de desarrollo complementarias

Integración básica de React.js

Próximos pasos

28
Configuración y Uso de Webpack con React
00:48 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:09

Optimización de Proyectos con Webpack: Minificación y Hashing

Curso de Webpack

Clase 12 de 28

Clase 12 / 28

Recursos

¿Cómo optimizar un proyecto con Webpack?

La optimización en el desarrollo web es un pilar fundamental para garantizar un rendimiento elevado de nuestras aplicaciones. Webpack, una robusta herramienta de bundling, ofrece capacidades avanzadas para optimizar nuestros proyectos al comprimir CSS, JavaScript y optimizar imágenes. Descubramos cómo implementar estas mejoras utilizando las configuraciones de Webpack.

¿Qué herramientas necesitamos para empezar?

Para llevar a cabo la optimización, comenzaremos instalando unas dependencias esenciales:

CSS-minimizer-webpack-plugin: Este plugin utiliza cssnano debajo para minimizar nuestro CSS, haciéndolo más ligero para los navegadores.
Terser-webpack-plugin: Una herramienta eficaz para minificar JavaScript, reduciendo su tamaño sin comprometer su funcionalidad.

Y para instalarlas, ejecutamos el siguiente comando en nuestra terminal:

npm install css-minimizer-webpack-plugin terser-webpack-plugin --save-dev

¿Cómo configuramos la optimización en Webpack?

Una vez instalados los plugins, integrarlos en nuestro archivo de configuración de Webpack es sencillo:

const CSSMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CSSMinimizerPlugin(),
      new TerserPlugin(),
    ],
  },
};

De esta forma, estamos configurando Webpack para minimizar tanto CSS como JavaScript en el proceso de build.

¿Cómo identificamos cada versión de nuestra build?

El uso de hashes para identificar builds únicas es fundamental para el control de versiones. Con Webpack, podemos integrar hashes en los nombres de nuestros archivos de salida:

output: {
  filename: 'bundle.[contenthash].js',
  path: path.resolve(__dirname, 'dist'),
},

Esto asegura que cada cambio en el código produce un nuevo archivo con un hash único, facilitando la gestión de caché y detectando cambios rápidamente.

¿Cómo trasladamos archivos a assets y qué ventajas ofrece?

El uso del hash se puede extender a otros recursos, como fuentes e imágenes, para garantizar una integración eficiente en el pipeline de despliegue. Cambiar la configuración para mover CSS a la carpeta assets además de adjuntarle un hash:

new MiniCssExtractPlugin({
  filename: 'assets/[name].[contenthash].css',
}),

Con esto, cada archivo CSS genérico se trasladará a assets con su respectivo hash, facilitando el control sobre los cambios y actualizaciones necesarias tras cada build.

Probar y verificar optimizaciones

Utilizar comandos como npm run build o npm run dev nos permite observar los efectos de las optimizaciones realizadas. Es crucial revisar la carpeta dist para verificar la correcta estructura y minificación de nuestros archivos.

npm run build

Comprobando en el navegador que cada recurso está cargando correctamente, podemos confirmarnos efectivamente que la optimización ha sido exitosa. Utilizar herramientas como el inspector del navegador ayuda a visualizar si cada archivo se está utilizando apropiadamente según nuestras configuraciones.

Mantener optimizado tu proyecto es esencial, y aunque puede ser un desafío al principio, unos pocos ajustes en tu archivo de configuración de Webpack pueden marcar una gran diferencia. Continúa explorando y aplicando estos conceptos en tu workflow diario para obtener mejoras notables en el rendimiento de tus aplicaciones.

Andres Felipe Pinchao Ramirez

Hace 6 años

MY NOTES FOR OPTIMIZATION WITH WEBPACK :D

RECURSOS OP

¿Por qué es importante usar Hashes en nuestros archivos?

Los recursos que se guardan en memoria cache suceden cuando el navegador entra a un sitio por primera vez detecta los recursos y los guarda. Por ello la siguiente vez sera mucho más rápido porque estarán en memoria
- La desventaja esta cuando sacamos una nueva versión, porque tendrán un mismo nombre evitando que se descargue los nuevos cambios, por lo tanto, el usuario no recibirá los nuevos cambios
- Para que no haya conflictos con la cache una vez que tengamos nuestro proyecto en producción es importante darles un hash para cada nueva versión

Segun la documentación oficial de webpack nos comunica que actualmente terser-webpack-plugin viene incluido desde webpack 5 😄

Fuente:

TerserWebpackPlugin

Probando un poco más dentro del proyecto, para activar terser por defecto de webpack solo debemos usar el siguiente código

module.exports = {
...
optimization: {
    minimize:true
  }
}

Es decir que no podemos usar la propiedad minimizer: []. Pero si deseáramos personalizar la optimización y agregar plugins como ser css-minimizer-webpack-plugin ahi toca instalar y usar terser-webpack-plugin dentro de optimizations, otro caso de este tipo sería si desearas personalizar el plugin de terser

Una de las cosas mas importantes por la cual utilizamos webpack es la optimización de nuestro proyecto, en comprimir nuestro css, nuestro javascript y optimizar nuestras imagenes, entre otras caracteristicas.

Vamos a instalar unas dependencias que nos ayudaran con esto

npm install css-minimizer-webpack-plugin terser-webpack-plugin -D

Ahora vamos a añadir nuestra configuración en nuestro archivo de webpack

//Importamos los plugins que acabamos de instalar
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = requiere('terser-webpack-plugin');

Luego vamos a añadir esto a nuestro archivo como una nueva configuración llamada optimization

optimization:{
    minimize: true,
    minimizer: [
      //Instanciamos las dependencias que estamos importando
      new CssMinimizerPlugin(),
      new TerserPlugin(),
    ]
  }

Otra de las optimizaciones que podemos realizar para poder verificar las versiones que estamos trabajando tiene que ver mucho directamente con los hash

Asi que vamos a identificar cada bild de nuestro proyecto con un hash

añadimos los hash en output

output:{
    path: path.resolve(__dirname, 'dist'),
    //cambios este elemento y le pondremos tanto el name para que lo identifique
      //como la parte del contenthash para que nos muestre eso
    filename: '[name].[contenthash].js',
    //para insertar el cambio y mover las fuentes a otra carpte lo hacemos aqui
    assetModuleFilename: 'assets/image/[hash][ext][query]'
  },

lo añadimos en nuestras fuentes

{

        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options:{

            limit:10000,
            mimetype:"application/font-woff",
            name: "[name].[contenthash].[ext]",
            outputPath: "./assets/fonts/",
            publicPath: "./assets/fonts/",
            esModule: false,
          }
        }

      }

Lo añadimos en la instancia de la dependencia que compila nuestro css

//Le anadimos una configuracion al plugin que nos permite compilar en css
    new MiniCssExtracPlugin({

      filename: 'assets/[name].[contenthash].css'

    }),

Terminamos la configuracion y ahora compilamos webpack y podremos ver los archivos optimizados en dist/assets

David Gustavo Lopez Figueroa

Hace 5 años

Gran aporte solo me quede con la duda de que hace [query] en assetModuleFilename. Saludos

Comentarios (71)71 comentarios

Fernando Quinteros Gutierrez

Sergio Castro García

Juan David González Rodríguez

Daniel Vicente Vergara Suarez

lucas cartisano

Damián De Aguiar

Eduardo Román Salas Cornejo

Hace 4 años

Lucas Aristizábal

Javier Ignacio Monasterio Solar

Izquierdo Alicia

Juan Ramirez

Emmanuel Rodríguez

Cristian Parra

Edgar Josué Torres Urquilla

David Santiago González Ramos

Uriel Alberto Arevalo Franco

Jesús David Vega Porras

Andres Gallego

jose walter

Jhon Eduard Bocanegra Ortiz

Gonzalo Ramirez

Orlando Manuel Mendoza Vargas

Joseph Manuel Salen Pantoja

Camilo José Mezú Mina

david jurado

Angel David Contreras Barrios

Rony Porraz Vargas

Dámaris Raquel Terrazas Terán

Arturo Casas Quiroga

Jimer Samuel Espinoza

César Augusto Cortés Labrada

David Campos

Andres Prieto

Introducción a Webpack

Curso Avanzado de Webpack para Producción Web

Configuración y uso de Webpack para proyectos JavaScript modernos

Proyecto inicial

Configuración y Uso de Webpack en Proyectos JavaScript

Optimización de Proyectos Web con Webpack para Producción

Configuración básica de Webpack para proyectos JavaScript

Loaders y Plugins en Webpack

Integración de Babel y Webpack para compatibilidad JavaScript

Configuración de HTML-webpack-plugin en Webpack

Configuración de Webpack para CSS y Preprocesadores

Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js

Importación de Imágenes con Webpack Asset Module

Optimización de Fuentes Locales con Webpack

Optimización de Proyectos con Webpack: Minificación y Hashing

Alias en Webpack: Simplifica la Importación de Módulos

Deploy del proyecto

Variables de Entorno en Webpack para Proyectos Seguros

Configuración de Webpack para Modo Desarrollo

Configuración de Webpack para Producción y Limpieza de Builds

Activar Watch Mode en Webpack para Desarrollo y Producción

Despliegue de Proyectos Web con Netlify y GitHub

Herramientas de desarrollo complementarias

Configuración de Webpack Dev Server para Desarrollo Local

Análisis de Dependencias con WebPath Bundle Analyzer

Uso de Source Maps en Webpack para Depuración de Código

Integración básica de React.js

Configuración de Webpack y React desde Cero para Producción

Configuración de Webpack en Proyecto React con Babel y JSX

Configuración de Webpack para Proyectos HTML y Servidor Local

Configurar CSS y SaaS en React con Webpack

Configuración de Webpack para Producción en React

Despliegue de Aplicaciones React en Netlify

Próximos pasos

Configuración y Uso de Webpack con React

Optimización de Proyectos con Webpack: Minificación y Hashing