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 🕺