Skip plugins during development on Gatsby

Skip plugins during development on Gatsby

Sasivarnan R Sasivarnan R · November 2, 2021 · 2 min read

One of the key advantage of Gatsby is it’s huge plugin ecosystem.

Whatever integration that we can think of to add to our Gatsby site, there is a high chance that there will be a plugin of available for it.

But when our site grows, it can become a hassle. Especially during the development, we won’t be needing certain plugins that are only needed during the build phase.

Let’s see how can we skip plugin(s) during the development.

// gatsby-config.js

module.exports = {
  plugins: [
    // ... plugins to include on development
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: process.env.GATSBY_SITE_GOOGLE_ANALYTICS,
      },
    },
  ],
};

In the above gatsby-config.js file have several plugins including the gatsby-plugin-google-analytics plugin. In order to skip it during the development, just update the gatsby-config file as below.

// gatsby-config.js

const isProduction = process.env.NODE_ENV === "production";

module.exports = {
  plugins: [
    // ... plugins to include on development
    ...(isProduction
      ? [
          // ... other plugins to include only on build time
          {
            resolve: "gatsby-plugin-google-analytics",
            options: {
              trackingId: process.env.GATSBY_SITE_GOOGLE_ANALYTICS,
            },
          },
        ]
      : []),
  ],
};

Don’t forget to restart the dev server once you made changes to the gatsby-config.js file.

In the updated gatsby-config.js file, we moved the gatsby-plugin-google-analytics into an array in the new code block. The plugins specified on the new code block will be spread on the gatsby plugins only during the build time.

I hope this post was helpful to you. If yes, let me know in the comments section below and share this post with your circle.