No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripción 🔥

Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

4D
11H
30M
44S
Curso Práctico de Webpack

Curso Práctico de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Optimización de imágenes con Webpack y CDN

13/22
Recursos

Aportes 3

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Optimización de imágenes con Webpack y CDN

1.- instalamos los recursos:

npm install image-minimizer-webpack-plugin imagemin-optipng -D 

En webpack.config.dev.js y luego en webpack.config.js:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// Debajo de minicssextractplugin o por esta área
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

y luego en plugins:

   new ImageMinimizerPlugin({
      minimizerOptions: {
        plugins: [
          ['optipng', { optimizationLevel: 5 }],
        ],
      },
    }),

IMPORTANTE: En rules habiamos agregado una regla para las imagenes.

      {
        test: /\.(png|jpg)$/,
        type: 'asset/resource',
      },

y debemos modificarla de la siguiente manera:

      {
        test: /\.(png|jpg)$/,
        type: 'asset',
      },

y npm run build && npm run start para verificar.

Acá estamos solo optimizando imágenes sin pardina .png usando imagemin-optipng, pero si quieremos optimizar otras imagenes pueden instalar estos plugins:

Sin perdida => modo Lossless

  • .png
npm install imagemin-optipng -D
  • .jpeg
npm install imagemin-jpegtran -D
  • .svg
npm install imagemin-svgo -D
  • .gif
npm install imagemin-gifsicle -D

Con perdida => modo Lossy

  • .png
npm install imagemin-pngquant -D
  • .jpeg
npm install imagemin-mozjpeg -D

Para saber mas sobre la optimizacion de imagenes con webpack Optimize Image 😄

Justo lo que necesitaba, excelente clase.