Skip plugins during development on Gatsby

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.