Optimización con Webpack

¿Qué nos ofrece Webpack?

Webpack nos ofrece distintas formas de hacer optimización para llevar nuestro proyecto a producción, desde crear hashes en nuestros ficheros para invalidar correctamente la caché hasta poder ir analizando las dependencias para ver cuáles de ellas repercuten más negativamente en nuestro proyecto.

Es la versión 4 de Webpack es muy sencillo configurar la optimización, lo que se puede hacer simplemente activando y desactivando algunos flags, pero es obligatorio saber lo que estamos haciendo en cada caso. Al final no sirve de nada tener una configuración sencilla si no entendemos por qué estamos aplicando esas configuraciones.

¿Qué pasa con la caché?

Buena parte de la optimización en Webpack pasa por entender cómo funciona la caché.

Básicamente, la primera vez que el usuario accede al navegador, va a tener que descargar todos los ficheros de rigor para para poder ejecutar la aplicación, y a partir de ese momento la caché del navegador seguirá cacheando los ficheros.

A partir de la segunda vez que el usuario acceda a la página web, estos ficheros irán directamente desde la caché de su navegador, con lo cual se servirán muchísimo más rápido.

Como hemos comentado antes, buena parte de hacer optimización se basa en hacer un buen uso, un uso inteligente de la caché del navegador.

Vamos a ver un ejemplo de todo esto con una imagen:

Tenemos una aplicación dónde vamos a mostrar una lista de productos, por ejemplo, y vamos haciendo actualizaciones diarias en esa lista de productos. Si tenemos un único fichero con toda la página web, dada vez que hagamos un cambio en este fichero (bundle.js), el mismo va a cambiar y el usuario se lo va a tener que descargar.

De esta forma el día 1 se tendrá que descargar 500 KB, por ejemplo. El segundo día hemos agregado productos nuevos, con lo cual ocupa más, por lo que no solo se tiene que descargar esos 500 KB, sino otros 10 adicionales.

El día 3 ocurre lo mismo, el día 4 también… el tamaño del archivo va creciendo, y realmente cada vez que el usuario accede es como si entrase la primera vez, porque aunque el navegador esté cacheando estos ficheros, al día siguiente queda inválida, ya que solo tenemos un único fichero, y en cuanto cambie cualquier cosa, ya cambia el fichero al completo.

En esta otra imagen vemos que en lugar de tenerlo todo en un fichero, lo dividimos en varias partes. En el archivo bundle.js tenemos solamente lo esencial de Webpack, como el Bootstrap para empezar la aplicación, después podemos tener el archivo Products.js con nuestra lista de productos, otro archivo About.js con todo lo relacionado con el “Acerca de”, además de una dependencia por cada paquete.

Vemos que el usuario, el primer día se tendrá que bajar esos 500 KB que tenía que descargar inicialmente, pero a partir del segundo día, muchos ficheros que no cambian van a poder ser servidos directamente desde la caché.

Si actualizamos una dependencia el siguiente día, sí que tendría que volver a descargar la dependencia, pero el resto de cosas vendrían desde la caché.

De esta forma el primer día que el usuario acceda tiene un impacto grande, pero a partir del segundo día es mucho menor.

Si quieres aprender en profundizar sobre Webpack puedes hacer el curso de Webpack básico en el que aprenderás qué es Webpack y cómo utilizarlo en tus proyectos. Si quieres avanzar y profundizar sobre Webpack puedes hacer el curso de Webpack intermedio en el que aprenderás a estructurar los ficheros de configuración y a configurar un proyecto para su puesta en producción aplicando optimizaciones y utilizando propiedades nuevas que se impartieron en el curso básico.

Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.