Curso de Webpack con Express.js, React.js y TypeScript
Curso de Webpack con Express.js, React.js y TypeScript

Introducción

1

¿Por qué usar Webpack?

2

Presentación del proyecto en React.js: PlatziStore

Webpack en el Backend

3

Instalación y configuración de Express.js

4

Configuración de Webpack para Express.js

5

Configuración de TypeScript

6

Preparar la API Rest con Express.js

Webpack en el Frontend

7

Migracion de Webpack 4 a Webpack 5

8

Configuración inicial de Webpack para PlatziStore

9

Cómo integrar la API de Platzi Store

10

Integrando la API de Platzi Store

11

Webpack Alias

12

Manejo de assets en Webpack

13

Optimización de imágenes con Webpack y CDN

14

Integración con TypeScript

15

Hot Reload

16

Lazy Loading

17

Code Splitting en desarrollo

18

Code Splitting en producción

Despliegue

19

Deploy de React en Netlify

20

Deploy de Express en Heroku

21

Comprar y conectar un dominio

22

Próximos pasos con Webpack

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
2 Hrs
22 Min
26 Seg
Curso de Webpack con Express.js, React.js y TypeScript

Curso de Webpack con Express.js, React.js y TypeScript

Oscar Barajas Tavares

Oscar Barajas Tavares

Optimización de imágenes con Webpack y CDN

13/22
Resources

How to optimize PNG images in your project with Webpack?

Learning how to optimize images is essential to improve the performance of your web applications. Poorly optimized images can cause slow loading times and a poor user experience. In this guide, you will discover how to integrate and configure a plugin in Webpack that will allow you to optimize PNG images effectively.

What do you need to get started?

To get started, make sure you have your project ready and follow the steps below:

  1. Plugin Installation: we will use the image-minimiser-webpack-plugin and imagemin-optiPng.

    npm install --save-dev image-minimiser-webpack-plugin imagemin-optiPng

    They are installed as development dependencies so you can use them when building your project.

  2. Initial Configuration:When you finish installing, configure the plugin in your development environment to observe the changes in real time.

How to configure the plugin in Webpack?

  1. Webpack Integration:Work on the development configuration in your Webpack file.

  2. Constants definition:Create a constant to use the plugin:

    const ImageMinimizerPlugin = require('image-minimiser-webpack-plugin');

    Make sure the assets are identifiable and remove any unnecessary resources that may interfere.

  3. Plugin configuration:In the plugins section, add a new instance of the plugin with the appropriate options for PNG:

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

    This configuration applies a default optimization level that is efficient for PNG images.

How to check the optimization?

Once the plugin is configured, it is time to put it to the test:

  1. Project build:run your project to test the optimization performance.

    npm run build

  2. Checking results:After the build, check the reduced size of your PNG file. According to the example, a 25 KB image is reduced to 9 KB, significantly optimizing the size and providing better performance.

When to optimize images?

  • Logos and essential media: Integrate images that are fundamental to your application such as logos or key images.
  • Third-party resources: Avoid optimizing images that are already processed from a CDN service.
  • Performance and user experience: Ensure that navigation in your application is not slow due to heavy images.

What other images can you optimize?

In addition to PNGs, you can also optimize

  • SVGs
  • GIFs
  • JPGs

You just need to adjust the plugin and specific settings for each format you use.

Keep exploring new ways to optimize your application and join me in the next class, where we will work with TypeScript and its integration with Webpack, taking your projects to a new level of efficiency. Every step you take today leads you to be a more competent developer tomorrow!

Contributions 3

Questions 1

Sort by:

Want to see more contributions, questions and answers from the community?

Paolo Joaquin Pinto Perez

Paolo Joaquin Pinto Perez

4 years ago

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.

Juan David González Rodríguez

Juan David González Rodríguez

4 years ago

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 😄

Camilo Alexander Velandia Velandia

Camilo Alexander Velandia Velandia

4 years ago

Justo lo que necesitaba, excelente clase.