Webpack: ¿Qué es source maps?

Qué es source maps

En Webpack cuando estamos aplicando una serie de loaders o de transformaciones a nuestro código, este código que genera esas transformaciones en un código que difiere mucho del que nosotros hemos programado. Por este motivo el debugging de este código se convierte en un problema, puesto que nos vamos a encontrar un código que no es el nuestro y que es generado automáticamente por Webpack. Es en estos casos dónde se emplean lo que se conoce como source maps, que es un mapeo que se realiza entre el código original y el código transformado, tanto para archivos JavaScript como para archivos CSS. De esta forma podremos debuggear tranquilamente nuestro código.

Tipos de source maps

Existen diferentes tipos de source maps:

• Inline: En los que la información de este mapeo es agregada directamente a los ficheros generados por Webpack, es decir, va a estar todo incluido en el mismo bundle, con lo cual también aumenta un poco el tamaño del mismo.
• Separate: En este caso Webpack va a emitir ficheros .map específicos para estos mapeos del código generado, por lo que están separados del bundle, por lo que el mismo va a tener un menor tamaño.

El tipo Inline resulta mejor opción para desarrollo. De hecho si utilizamos la opción de modo de desarrollo (development mode) en Webpack, que podemos configurar manualmente o a través del archivo de configuración, automáticamente van a ser de este tipo los source maps que se generen.

En cambio, el tipo Separate es mejor para producción, porque cuando llevemos la aplicación a producción, podemos separar los source maps y así tener la aplicación desplegada sin necesidad de tener source maps en el mismo sitio. Si ocurre cualquier error, podemos subir manualmente los source maps, hacer el debugging y bajarlos, de tal forma que el usuario no se vea obligado a bajarse estos ficheros.

Diferentes source maps

Dentro de los dos tipos principales de source maps, existen diferentes source maps que podemos utilizar en Webpack, tanto en Inline como en Separate, y cada uno ofrece unas ventajas y unos inconvenientes.

Normalmente las variables que se manejan en ellos es la calidad del código que vamos a ver para poder debuggearlo y la performance con la que estos se van a generar.

Los que existen dentro del tipo Inline son los siguientes:

Por defecto el que genera el development mode o modo de desarrollo es el tipo eval, que es bastante rápido de generar pero lo que obtenemos al final es código generado, es decir, vamos a estar viendo código de Webpack.

Si el código generado es sencillo, podremos debuggearlo bien, pero si el código es más complejo este paso se nos puede hacer bastante problemático.

El tipo cheap-eval-source-map no es muy rápido y nos devuelve el código transformado, es decir, código que al final ha pasado por los transformadores y por los loaders. Si no estamos utilizando ninguna transformación de código para JavaScript, podemos utilizarlo, ya que ese código va a ser similar al generado, ya que el JavaScript no se ha pasado por ninguna transformación.

El tipo cheap-module-eval-source-map es similar al anterior, pero tiene un performance medio y además devuelve el código original, es decir, nuestro propio código, el que nosotros hemos creado. Es el tipo recomendado en la página oficial de Webpack, ya que es el que mejor relación calidad-performance tiene.

En cuanto a los tipos que tenemos dentro de los Separate son estos:

Podemos ir utilizando uno u otro dependiendo de nuestras necesidades, ya que en este caso no hay ninguno recomendado como tal, porque depende de cómo va a empaquetarse nuestra aplicación en producción.

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.