How to "fix" Gatsby slow local build times

• React
• Gatsby
• JavaScript

Ahoy, as the title suggests in this post I’m going to explain one way to resolve the “slow local build time” issues I know lots of you experience with Gatsby.

It’s worth pointing out that in this post I’ll specifically be referring to sites that source .md from the local file system. (Same applies for .mdx or .json FYI)

However, I’m pretty confident a similar approach would work when sourcing data from remote sources, be it from your own implementation of sourceNodes or perhaps when using one of the many source plugins… the latter however is 100% dependant on if the plugin author has exposed a method to limit how much data is being sourced.

If you wanna jump ahead here’s a demo repo: https://github.com/PaulieScanlon/gatsby-slow-local-build-times

How much data is being sourced

In short this is the crux of the problem. If you’re sourcing loads of data the Gatsby build steps are delayed while Node / gatsby-source-filesystem do their thing.

In order to speed that bit up it’s advised you limit the amount of data you’re sourcing.

gatsby-source-filesystem

This plugin is usually responsible for sourcing files. In the demo repo I’m sourcing Markdown files from the content directory, and I’d imagine you’ll have something similar to the below in your gatsby-config

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `markdown-pages`,
        path: `${__dirname}/src/content`,
      },
    },
    `gatsby-transformer-remark`,
  ],
};

The main thing to look at is the path. The above snippet will source everything from the src/content directory.

Do you need to source everything

Good question right? Well, in production, mostly likely the answer will be yes. In development however, probably not.

** This was my penny drop moment! **

I have to admit I’m a little annoyed with myself for not thinking of this solution sooner, and, I don’t mind admitting, a little embarrassed too!

When I’m developing a new feature for my blog or writing a new post I don’t need to see all of the blog posts, generally a handful of the latest posts will be enough.

So the above could now look like this 👇

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `markdown-pages`,
        path: process.env.NODE_ENV === `development` ? `${__dirname}/src/content/2021` : `${__dirname}/src/content`,
      },
    },
    `gatsby-transformer-remark`,
  ],
};

Using a ternary operator and testing if process.env.NODE_ENV equals development I can either source a smaller amount: src/content/2021 or all of the content: src/content

Such a simple trick and I can’t believe I hadn’t thought of it before. You live an learn ay! 🤦

Anyway, give it a go, I’m pretty sure with this little trick you’ll get those all important speedy local build times back.

See you around the internet 🕺