Atrás

Los problemas que resuelve Webpack

Debido a la reciente aparición de frameworks y librerías como React, Angular o VUE, se le está quitando carga a los servidores para llevarla al lado del cliente. Esto ha provacado que hayan empezado a surgir algunos problemas que Webpack nos va a ayudar a resolver.

 

Problemas que soluciona a los desarrolladores

 

Múltiples archivos

Este problema se puede entender observando el paradigma de la programación basada en componentes, donde la aplicación se va a dividir en múltiples archivos. Si en la aplicación vamos a tener, por ejemplo, 20 componentes, una vez que el usuario entra en dicha aplicación, se van a realizar 20 peticiones al servidor para descargarse esos 20 archivos. Si queremos separar el componente a su vez en un archivo con el HTML, otro para el CSS y otro más para el JS, el número de peticiones se va a incrementar.

Solución de Webpack:  crea un único archivo, llamado bundle, en el que va a unir todos estos componentes. De esta forma en lugar de 20 peticiones solo se realizará una petición y con esta  podremos descargarnos toda nuestra aplicación.

 

Tamaño de la aplicación

Como ocurría en el caso anterior, si tenemos muchos archivos que descargar se tardará más tiempo en cargar la aplicación que si reducimos esa cantidad de archivos. Pues lo mismo ocurre si los archivos que hay descargar pesan más, ya que cuanto más pese un archivo, más tiempo va a llevar descargarse.

Solución de Webpack:  nos va a ayudar a reducir los archivos quitando espacios en blanco innecesarios, cambiando el nombre de variables, funciones, etc, a la hora de generar la versión de la aplicación para subir a producción.

 

Transpilación

Otro problema nos lo encontramos en que los navegadores tardan un tiempo en ponerse al día con las últimas funcionalidades de los lenguajes. Por lo tanto, si queremos desarrollar usando las últimas versiones de los lenguajes o usando lenguajes que el navegador no sabe interpretar  (TypeScript, SASS…) vamos a tener que transpilar el código a un lenguaje (en una determinada versión) que entiendan los navegadores.

Solución de Webpack: le indicaremos que use unos ciertos loaders para realizar esa transpilación.

 

Linting

Se nos ha olvidado pasar un parámetro a una función, el valor que se le ha dado a una variable no se corresponde con el tipo de esta…

Solución de Webpack: se comentaba antes que en Webpack se pueden usar unos loaders. Estos también se pueden usar para otros propósitos como el linting, es decir, analizar el código comprobando que ciertos archivos cumplen unas reglas que se han definido en un linter.

 

Conclusión

Webpack soluciona estos problemas y muchos más. Es una herramienta que nos va a ayudar mucho durante el desarrollo y también a la hora de generar la versión de producción de la aplicación que se está desarrollando.

Instagram, Airbnb, Soundcloud, Pinterest, Udemy, entre otras, son algunas de las empresas que hacen uso de Webpack. De hecho, hoy en día prácticamente cualquier entidad que usa algún framework o librería basado en componentes como Angular, React o VUE utiliza Webpack. ¡Incluso puede llegar a usarse sin utilizar alguna de estas tecnologías! ¿Te animas?