Apuntes

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

🤔 ¿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
• Este problema lo resuelve webpack estableciendo hashes para recursos
• Cuando nombremos en la configuración de webpack es importante usar [contenthash] para evitar problemas con la cache