Gatsby: Deshabilitar source maps en producción

Introducción

Gatsby es una plataforma para la generación de webs estáticas basada en ReactJS y alimentada por GraphQL. Llevo bastante tiempo utilizando Gatsby y más recientemente lo he empleado para reconstruir mi página personal por completo.

Una de las características que más me ha llamado la atención es que los source maps correspondientes al código Javascript transpilado se publican en los builds de producción por defecto en la V2. Es bueno ser transparentes y publicar el código fuente para compartir con la comunidad software, pero tal vez este sea un efecto indeseado (especialmente cuando desarrollemos websites comerciales).

En esta publicación veremos como podemos configurar Gatsby para publicar los source maps en función del entorno para el que estemos lanzando el build (generarlos para el entorno de desarrollo y deshabilitar la generación para el entorno de producción).

Customizando la configuración de Webpack en Gatsby

La generación de los source maps se controla a través de la configuración de Webpack, más concretamente mediante la opción devtool. Lo que queremos conseguir es modificar la configuración de Webpack de Gatsby cuando lancemos el script para el build, de modo que la generación de source maps esté desactivada si el entorno para el que se lanza el build es producción.

Gatsby ofrece la posibilidad de modificar la configuración de Webpack tanto para plugins como para el proyecto actual añadiendo configuraciones al fichero gatsby-node.js a través de la acción setWebpackConfig.

En el siguiente fragmento se muestra el código insertado en mi fichero gatsby-node.js:

1exports.onCreateWebpackConfig = ({ getConfig, actions }) => {
2  if (getConfig().mode === 'production') {
3    actions.setWebpackConfig({
4      devtool: false
5    });
6  }
7};

En la línea 2 comprobamos si el modo del build es 'production', para modificar condicionalmente la configuración de Webpack para la opción devtool (hay que recordar que los source maps se generan siempre por defecto en Gatsby). En las líneas 3-5 se sobrescribe únicamente la configuración de devtool dejando su valor false de modo que se deshabilite la generación de source maps.

Es importante remarcar que el directorio public no se limpia cuándo se lanza el comando gatsby build. Si la configuración de Webpack se ha modificado después de haber hecho ya algún build y no se ha vaciado el directorio public todavía habrá source maps procedentes de los builds anteriores. Lo habitual es que haya algún paso dentro de la sección de scripts del fichero package.json para limpiar este directorio.