Preventing source map output during builds in Gatsby

Introduction

I’ve been building this blog with Gatsby for nearly 3 years now. The number of articles has significantly increased, and along with that, the build size has also grown.

Given that the free tier of Firebase Hosting I’m deploying to is capped at 10GB, I’ve been keen to reduce the size wherever possible. While reviewing the build artifacts, I noticed that they included .js.map source map files.

There’s no particular need for source map files in production builds, so I want to prevent them from being output.

Configuration

Upon researching, I found there’s an official plugin named gatsby-plugin-no-sourcemaps.

• https://www.gatsbyjs.com/plugins/gatsby-plugin-no-sourcemaps/

First, you need to install it.

npm install gatsby-plugin-no-sourcemaps

After that, all you need to do is add it to your gatsby-config.js file as a plugin, and the configuration is complete.

module.exports = {
  // ...
  plugins: [
    {
      resolve: "gatsby-plugin-no-sourcemaps",
    },
  ],
  // ...
}

I took a look inside the plugin, and it was merely performing the following action. If you don’t want to add the plugin, you can simply add the below code to your gatsby-node.js file.

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage === `build-javascript`) {
    actions.setWebpackConfig({
      devtool: false,
    })
  }
}

Conclusion

Although the source map files no longer get output, in the case of my blog, it didn’t significantly reduce the build size.

I’ve already optimized by resizing the images. If I ever surpass the 10GB free tier, it seems the quickest solution might be to switch platforms.