Optimización de imágenes con Webpack y CDN

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.