No tienes acceso a esta clase

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

Aprende Inglés, Programación, AI, Ciberseguridad y más a precio especial.

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
23 Hrs
43 Min
31 Seg

Optimización de imágenes con Webpack y CDN

13/22
Recursos

Aportes 3

Preguntas 1

Ordenar por:

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

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.