Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

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

12/28
Recursos

Aportes 33

Preguntas 17

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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

<h4>Apuntes</h4>
  • 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

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()
            ],
  },
};

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

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

MY NOTES FOR OPTIMIZATION WITH WEBPACK 😄

RECURSOS OP

<h3>¿Por qué es importante usar Hashes en nuestros archivos?</h3>
  • 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

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.

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

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

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í.

<h4>Optimización: hashes, compresión y minificación de archivos</h4>

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.

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'
  }
  ...

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.

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',
        ],
      },

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

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

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(),
        ]
    }

}

me encanta este curso!

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.

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)

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

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

Con unos 20 a 25 por curso estaria perfecto.

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

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.

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 😃

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 😦