By Paul Scanlon

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 šŸ•ŗ

Hey!

Leave a reaction and let me know how I'm doing.

  • 0
  • 0
  • 0
  • 0
  • 0
Powered byNeon