Optimización: hashes, compresión y minificación de archivos

🤔 ¿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

Creo que no está bien explicado, como dijo otro usuario, dice lo que escribe, pero no fundamenta lo que hace, con este curso no aprendo a hacer cosas por mi mismo, no se como se configura, que plugin usar, donde buscarlo, como configurarlo, por que ese y no otro, dan por sabido muchas cosas que no sabemos, muy flojo el curso

🏗️ Optimización: hashes, compresión y minificación de archivos

• Unos de las razones por que utilizamos webpack es porque nos permite optimizar y comprimir nuestro proyecto
• Debes utilizar los siguientes paquetes
  • css-minimizer-webpack-plugin ⇒ Nos ayuda a comprimir nuestros archivos finales CSS
  • terser-webpack-plugin ⇒ Permite minificar de una mejor forma
• Instalación

NPM

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

YARN

yarn add css-minimizer-webpack-plugin terser-webpack-plugin -D

• Una vez instalado el plugin debemos agregar la siguiente configuración

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

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

• Cuando nombremos en la configuración de webpack es importante usar [contenthash] para evitar problemas con la cache

Creo que estos cursos están mal enfocados. El profesor se limita a narrar lo que está haciendo, pero no explica el detalle de lo que hace, lo cual hace al curso confuso, denso y poco amigable.

Optimizaciones
Desde Webpack 4, podemos correr optimizaciones a nuestra preferencia al escoger el mode
Wenpack 5 incorpora TerserWebpackPlugin que, si bien CssMinimizerWebpackPlugin optimiza la compresión de nuestros archivos CSS, Terser optimizará la compresión de archivos js.

El objeto optimization se enfoca en Terser por lo que tendremos:

• optimization.minimize - para minimizar el bundle con TerserPlugin

module.exports = {
  //...
  optimization: {
    minimize: true,
  },
};

• optimization. minimizer - para sobreescribir la configuración por default de Terser y permitir el uso de varios minificadores

  optimization: {
    minimize: true,
            minimizer: [
                new CssMinimizerPlugin(),
                new TerserPlugin()
            ],
  },
};

jajajaj asi simple simple no lo es, lo mejor que se puede hacer es leer la documentación para entenderlo . saludos

Siento que se me mueren las neuronas al escuchar a este profesor. Curso totalmente nefasto.

MY NOTES FOR OPTIMIZATION WITH WEBPACK 😄

RECURSOS OP

• 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

En este punto del curso, en la carpeta dist se han generado bastantes archivos, les recomiendo en cada build borrar la carpeta y volver a compilar

rm -rf dist && npm run build

Es una lástima como Platzi desperdicia la experiencia y el conocimiento de Oscar. El profe es un excelente profesor, con muchos años de experiencia y muy didáctico al explicar un tema. El problema está en como enfocaron este curso. Si el curso fuese un curso práctico estaría bien que toque los conceptos por arriba y vaya narrando y mostrando como escribir una cofiguración. Pero el curso se supone, es un curso teórico en donde nos van a enseñar a usar webpack y sus conceptos. Justamente para eso está un profe, para enseñar, realizar analogías, metáforas, comparaciones, contar una anécdota TODO lo que sea necesario y mejor para explicar un concepto y volverlo más digerible. Si querían un narrador hubiesen contratado un locutor, le pasaban el guión y armaban el curso. Denle la libertad a Oscar que nos ENSEÑE y no que nos cuente lo que está haciendo en pantalla. PLATZI POR FAVOR LEAN LOS MENSAJES!!! ESTE curso me pareció muy pobre. Aún así sigo eligiendo Platzi.

No veo necesario ponerle el contenthash a las fuentes ya que rara vez se actualizan

No sé ni que estoy copiandoxd

Webpack, que ya es difícil aprender cada cosa. Y este tipo de explicaciones, así tan sencilla y simple, quedo con muchas dudas. muchos diran: Tienes la documentación, Ok!
.
Pero los fundamentos son importante para aprender todo a la perfección. No se, si debería tomar un curso antes que este?? Estoy un poco perdido con esta clase!

CssMinimizerPlugin
Es un plugin que nos permite minificar y optimizar los archivos CSS, por dentro del plugin utiliza una herramienta llamada cssnano
Documentación de CssMinimizer
TerserWebpackPlugin
Es otro plugin que nos minifica nuestro javascript
Documentación de TerserPlugin

Todo ha salido bien siguiendo los pasos y las explicaciones durante el curso. Pero también desde el inicio estuve leyendo la documentación en cada proceso de instalación y configuración entendiendo por qué se usó tal sintaxis o por qué se hacen tales cambios, además, gracias a la comunidad muchas veces me ahorré tiempo buscando soluciones. Esperemos que todo siga genial = D

Para poder optimizar de forma correcta el proyecto es necesario instalar algunas dependencias más para minimizar código, estas son css-minimizer-webpack-plugin y terser-webpack-plugin.

Para instalarlos usa el comanod npm i css-minimizer-webpack plugin terser-webpack-plugin -D.

Y al igual que con cualquier plugin hay que agregarlos a la configuración de Webpack, creando una constante para cada uno y luego añadiéndolos a la sección de optimization.

Otra optimización que se puede hacer es añadir un hash a cada versión de la app. Esto lo hacemos con cada archivo que se genera en la build.

Para ver la diferencia entre chunk, chunkhash y contenthash click aquí.

Si inspeccionas la web, veras que hay un error que se genera en la url de los Font que esta en la hoja de estilo final generada, debido que al cambiar la ruta de salida de la hoja de estilo en la configuración de webpack, hace que las llamadas a los assets dentro de esta hoja de estilos antepongan esa nueva ruta a la ruta especificada, ocasionando un error al no encontrar estos archivos, estuve leyendo la documentación del plugin mini-css-webpack-plugin y proporciona una opción para indicarle esta ruta de los assets llamados en la hoja de estilo, dejaré la solución que a mi me funcionó.

{
        test: /\.css|.scss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '/dist/',
            },
          },
          'css-loader',
          'sass-loader',
        ],
      },

Dios, que bueno que me fui por le camino del backend, el frontend se pone demasiado tedioso

Hola, por si alguien tiene el mismo problema: al abrir con live server la web se quedó de repente en blanco: en la consola tenía el mensaje de error: “Access to fetch … has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”.

El cambio a https://randomuser.me/api/ solucionó el problema 😃

Usamos webpack por la optimizaciones de nuestro proyecto, asi que tenemos que ir optimizando con webpack, para eso necesitamos instalar elementos clave que son:

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

Ahora tenemos que agregar los recursos a nuestra configuracion, con:

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

Ahora tenemos que agregar en los plugins en la parte de optimizacion en los plugins:

optimization: {
	minimize:true,
	minimizer:[
		new CssMiniMizerPlugin(),
		new TerserPlugin(),
		]		
}

Para identificar con las versiones que estamos trabajando podemos hacerlo con un hash, para poder identificarlo, esto podemos hacerlo modificando el filename con el hash asi:

filename: '[name].[contenthash].js'

De esta forma podemos cambiar varios elementos, como el de las fonts para saber cuando algo a cambiado:

name: "[name].[contenthash].[ext]",

Tambien podremos agregar una configuracion al MiniCssExtractPlugin, agregando una configuracion asi

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

El hash nos permite identificar el Build que vamos haciendo y si hay cambios, este igual cambia.

webpack nos ayuda a optimizar nuestro proyecto minificando los archivos.

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

optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerWebpackPlugin(),
      new TerserWebpackPlugin()
    ]
  },```

Optimización: hashes, compresión y minificación de archivos

Una de las cosas más importantes por las que utilizamos Webpack es por la optimización de nuestro proyecto.

Aquí lo haremos.

Primero tenemos que instalar los siguientes plugins.

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

Como cada plugin instalado en nuestro proyecto, hay que agregarlo como constante y mandarlo a llamar en webpack.config.js

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

Después añadimos la configuración de nuestra optimización.

optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin(),
    ]
  }

Ahora colocamos esta configuración en css, para que nos de un hash number. De esa manera detectar cuando se han realizado cambios en los archivos.

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

Hacemos eso, también con otros archivos como las imágenes.

name: "[name].[contenthash].[ext]",

Estos simples cambios pueden lograr una muy buena optimización del proyecto.

🍃 Plugin vs Loader

La principal diferencia entre un plugin y un loader en Webpack es que mientras que un loader es utilizado para procesar un tipo específico de archivo en el momento de la compilación, un plugin es utilizado para realizar tareas adicionales en la compilación de la aplicación.

Un loader procesa un archivo, transformando su contenido para que sea compatible con la aplicación. Por ejemplo, un loader de CSS se utilizaría para procesar archivos CSS en la aplicación para que puedan ser incluidos en la aplicación empaquetada final.

Por otro lado, un plugin es utilizado para realizar tareas adicionales en la compilación, como optimizar el código, limpiar los archivos innecesarios, o añadir variables de entorno. Un plugin puede ser cualquier cosa que haga una tarea en la compilación de la aplicación.

Espero que esto te haya ayudado a comprender la diferencia entre los plugins y los loaders en Webpack. Si tienes alguna otra pregunta, no dudes en preguntar.

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

lo que llevo del curso, he perdido tiempo que se puede invertir en otro curso, para qué nos hacen tomar un curso quéeni el profesor sabe explicar?

Oigan pero a mi me sale un archivo js muchisimo mas grande y mucho mas complejo de leer, con muchisimos llamados a funciones y variables que nunca use en desarrollo

Alguno que me ilustre qué significa un hash 🤷‍♀️🤦‍♂️

Comprensión y mitificación de archivos
Optimización: hashes, compresión y mitificación de archivos

Instalamos los plugins para optimizar los archivos de css y js.
Con Terser optimizamos o mitificamos los archivos de javascript y con Css Minimizer los de css.

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

Adjunto el archivo de webpack por si quieren comparar o para que les sirva de ayuda si comenten algún error de tipo typo.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
	entry:  './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].js',
        assetModuleFilename: 'assets/images/[hash][ext][query]'
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [
        {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css|.scss|.styl$/i,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'stylus-loader',
            ]
        },
        {
            test: /\.png/,
            type: 'asset/resource'
        },
        {
            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,
                }
            }
        }

    ]},
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'assets/[name].[contenthash].css'
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, "src", "assets/images"),
                    to: "assets/images"
                }
            ],
         
        })
    ],
    optimization: {
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin(),
            new TerserPlugin(),
        ]
    }

}

Optimización: hashes, compresión y minificación de archivos

Install dependencies to minimize and optimize the project

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

Add optimizations to webpack.config.js file

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    assetModuleFilename: 'assets/fonts/[hash][ext][query]',
  },
  resolve: {
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css|.styl$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader'],
      },
      {
        test: /\.png/,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
            mimetype: 'application/font-woff',
            name: '[name].[ext]',
            outputPath: './assets/fonts/',
            publicPath: './assets/fonts/',
            esModule: false,
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html',
    }),
    new MiniCssExtractPlugin(),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src', 'assets/images'),
          to: 'assets/images',
        },
      ],
    }),
  ],
  **optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin(),
    ]
  }**
};

The setting optimizations allows to add the optimization support to css (Css Minimizer) and Js (Terser).

Optimize to identify the versions we are using → Hash webpack.config.js file

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    **filename: '[name].[contenthash].js',**
    assetModuleFilename: 'assets/fonts/[hash][ext][query]',
  },
  resolve: {
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css|.styl$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader'],
      },
      {
        test: /\.png/,
        type: 'asset/resource',
      },
      {
        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,
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html',
    }),
    new MiniCssExtractPlugin({
      **filename: 'assets/[name].[contenthash].css',**
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src', 'assets/images'),
          to: 'assets/images',
        },
      ],
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
  },
};

The [contenthash] statement allows to have a control of project and builds versions in the css and js files optimized.

Optimización: hashes, compresión y minificación de archivos

Debemos agregar los siguientes plugins npm install css-minimizer-webpack-plugin terser-webpack-plugin -D

Luego de esto añadimos la siquiente propiedad al module.exports

const CssMinimizerPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");

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

Y para generar los archivos con hash modificamos los filename filename: "assets/[name][contenthash].css",

Hola, una consulta, existe algun plugin minimizador de html ?, agradeceria su ayuda

Para aquellos que quieran cambiar el el nombre del .css a algo como index.css, deben cambiar el atributo entry a un objeto, y esa key será usada como el nombre por default al generar los archivos, encontré esta solución aquí, y quedaría algo como:

...
module.exports = {
  entry: {
    index: './src/index.js'
  }
  ...

Por si alguno le da error instalando css-minimizer-webpack-plugin por un error en un postscript lo resolvi instalando primero opencollective-postinstall

yarn add css-minimizer-webpack-plugin terser-webpack-plugin -D

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

🍃 Para trabajar con fuentes personalizadas en Webpack, sigue estos pasos:

1. Instalar los loaders necesarios: Instala los siguientes loaders: url-loader y file-loader usando npm. También es recomendable instalar el loader webpack-dev-server para facilitar la visualización de los cambios.

   npm install url-loader file-loader webpack-dev-server --save-dev
   

2. Agregar las fuentes a la carpeta de assets: Crea una carpeta llamada assets en el directorio raíz de tu proyecto y añade las fuentes woff y woff2 que deseas utilizar a esta carpeta.

3. Configurar el loader en webpack.config.js: Agrega la siguiente configuración en el archivo webpack.config.js para decirle a Webpack cómo manejar las fuentes:

   module.exports = {
     //...
     module: {
       rules: [
         {
           test: /\\.(woff|woff2)$/,
           use: {
             loader: 'url-loader',
             options: {
               // Limita los archivos a 8 KB para que se carguen como Data URL
               limit: 8192,
               // Renombra los archivos de acuerdo al siguiente patrón
               name: '[name].[hash:7].[ext]',
               // Especifica la carpeta de salida para los archivos
               outputPath: 'assets/fonts'
             }
           }
         }
       ]
     }
   };
   
   

4. Importar la fuente en el archivo CSS: En el archivo CSS principal de tu proyecto, importa la fuente utilizando la sintaxis de @font-face. Asegúrate de usar la ruta de salida especificada en la configuración del loader en el paso anterior.

   @font-face {
     font-family: 'MyWebFont';
     src: url('../assets/fonts/my-web-font.woff2') format('woff2'),
          url('../assets/fonts/my-web-font.woff') format('woff');
     font-weight: 400;
     font-style: normal;
   }
   
   

Con estos pasos, deberías poder utilizar tus fuentes personalizadas en tu proyecto de Webpack.

I’m receiving an error in the publicPath due to an incorrect path. Here is my proposed solution: add to points at the beginning. like -->

            publicPath: "../assets/fonts",

Añadir hash al output

Añadiendo contenthash a minicss

Añadimos la optimización con los plugins instaladps

Importamos plugins

Paquetes neceesarios

me encanta este curso!

Estuve bastante tiempo dando vueltas a este tema. Creo que por fin lo entendí.
Dejo mis notas y espero les sirvan https://pastoral-guide-a46.notion.site/Optimization-hashes-compression-and-minification-of-files-2184050f2a764139b6611b55ba94ecdf
(están en inglés)

Los videos deberian se un poco mas cortos. Y la cantidad de videos tambien.

Con unos 20 a 25 por curso estaria perfecto.

12.-Optimización: hashes, compresión y minificación de archivos

.
Una de las principales razones de usar webpack es para optimizar nuestro proyecto, comprimir nuestro css, js, optimizar imágenes entre otras cosas.

Para optimizar vamos a :

• Instalar elementos que nos ayudan a minimizar el css y js y agregarlos a la configuración

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

• Otra de las optimizaciones es usar hash, vamos a identificar cada build de nuestro proyecto con un hash y si hay cambios el hash cambia.

Siempre que trato de instalar css-minimizer-webpack-plugin me lanza este error

npm ERR! code FETCH_ERROR
npm ERR! errno FETCH_ERROR
npm ERR! invalid json response body at https://registry.npmjs.org/is-absolute-url reason: Unexpected end of JSON input

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-08-04T22_11_17_611Z-debug.log

Del resto de dependencias me funciona bien 😦