Application build is taking more time in Gatsby


I am using gatsby with contentful. And I am dynamically generating pages.

My app build time is taking around 20 to 30 mins. Is any way I can reduce the time it is taking. Please note how long it is taking to build schema and bootstrapping the info.

I have added the logs of the building app below :

warning Plugin gatsby-plugin-intl is not compatible with your gatsby version 3.9.1 - It requires [email protected]^2.0.0
warning Plugin gatsby-plugin-intl is not compatible with your gatsby version 3.9.1 - It requires [email protected]^2.0.0
success open and validate gatsby-configs, load plugins - 0.576s
success onPreInit - 0.030s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.032s
success copy gatsby files - 0.039s
success Compiling Gatsby Functions - 0.170s
success onPreBootstrap - 0.183s
success createSchemaCustomization - 0.004s
success Contentful: Sync all items - 0.806s - 5487/5487 6809.10/s
success Contentful: Fetch data (nnigwk0legme-QA-Release-1.4.0) - 0.905s
info Updated entries 4936
info Deleted entries 0
info Updated assets 551
info Deleted assets 0
success Contentful: Process data (nnigwk0legme-QA-Release-1.4.0) - 1.173s
info Creating 7 Contentful Component: Video nodes
info Creating 1 Contentful Component: Section nodes
info Creating 9 Contentful Component: Text nodes
info Creating 63 Contentful Compose: Page nodes
info Creating 2 Contentful Component: Hero nodes
info Creating 10 Contentful Component: Image nodes
info Creating 74 Contentful Compose: SEO nodes
info Creating 2 Contentful Page: Landing Page nodes
info Creating 441 Contentful Component: Content Block nodes
info Creating 6 Contentful Page: Legal nodes
info Creating 3 Contentful Page: FAQ nodes
info Creating 18 Contentful Component: FAQ nodes
info Creating 1 Contentful Page: 404 nodes
info Creating 249 Contentful Component: Links nodes
info Creating 1 Contentful Component: Header nodes
info Creating 2 Contentful Component: Contact Information nodes
info Creating 59 Contentful Component: Links Section nodes
info Creating 1 Contentful Component: Footer nodes
info Creating 1 Contentful Component: Footer Legal Section nodes
info Creating 3 Contentful Component: Notification Bar / Hello Bar nodes
info Creating 5 Contentful Component: Payment Calculator nodes
info Creating 54 Contentful Component: Select Option nodes
info Creating 1 Contentful Component: Emailus/Contactus nodes
info Creating 48 Contentful Component: EligibleTermsForLoanAmount nodes
info Creating 105 Contentful Component: InsuranceFactorsForLoanAmount nodes
info Creating 8 Contentful Component: Loan Calculator Values nodes
info Creating 3 Contentful Component: Loan Product nodes
info Creating 5 Contentful Component: Region nodes
info Creating 6 Contentful Component: Input nodes
info Creating 1 Contentful Component: Toast nodes
info Creating 393 Contentful Simple Content Model nodes
info Creating 23 Contentful Component: Product and Services nodes
info Creating 31 Contentful Page: City nodes
info Creating 92 Contentful Component: Academy Article nodes
info Creating 4 Contentful Component: Financial Education nodes
info Creating 31 Contentful Component: Province Model nodes
info Creating 45 Contentful Component: Common FAQ nodes
info Creating 1 Contentful Component: Contact Us nodes
info Creating 78 Contentful Component: Benefits of a Personal Loan/Card nodes
info Creating 17 Contentful Component: Benefits of a Personal Loan nodes
info Creating 5 Contentful Page: Loan Product nodes
info Creating 143 Contentful Component: Feefo Review Card nodes
info Creating 38 Contentful Component: Feefo Reviews nodes
info Creating 1 Contentful Assest nodes
info Creating 1 Contentful Component: Auto Loans nodes
info Creating 4 Contentful Page: SEO nodes
info Creating 3 Contentful Page: Claims nodes
info Creating 2 Contentful Component: VAS - Loan Protection Plan nodes
info Creating 2 Contentful Component: VAS - Home & Auto Benefit Plan nodes
info Creating 1 Contentful Page: Contact Us nodes
info Creating 1 Contentful Component: Loan Protection Plan Claim nodes
info Creating 5 Contentful LPP Claim nodes
info Creating 1 Contentful Page: Value Added Services nodes
info Creating 1 Contentful Page: Find A Branch nodes
info Creating 1 Contentful Page: Point Of Sale nodes
info Creating 1 Contentful Component: Province Modal nodes
info Creating 1 Contentful Page: Loan Protection Plan nodes
info Creating 1 Contentful Got you covered nodes
info Creating 16 Contentful Component: LoanFrequency nodes
info Creating 1982 Contentful Component: Terms nodes
info Creating 241 Contentful Component: Amount Range nodes
info Creating 1 Contentful Page: Loan Calculator nodes
info Creating 1 Contentful Page: Creditoptimizer nodes
info Creating 1 Contentful Page: Small Business Loan nodes
info Creating 1 Contentful Page: Easyfinancial Difference Page nodes
info Creating 1 Contentful Page: Covid-19 nodes
info Creating 1 Contentful Page: In The Community nodes
info Creating 2 Contentful Component: Logo Tile nodes
info Creating 20 Contentful Component: Image with Links nodes
info Creating 1 Contentful Component: Required Documents nodes
info Creating 6 Contentful Component: Multiple Boolean nodes
info Creating 12 Contentful Component: Boolean nodes
info Creating 1 Contentful Component: Get In Touch nodes
info Creating 1 Contentful Page: Custom Landing Page nodes
info Creating 50 Contentful Container Component Name nodes
info Creating 1 Contentful Page: Home and Auto Benefits nodes
info Creating 1 Contentful Component: Get In Touch nodes
info Creating 1 Contentful Page: Contest Landing Page nodes
info Creating 1 Contentful Component: Ribbon Block nodes
info Creating 2 Contentful Component: Auto Loan Frequency nodes
info Creating 26 Contentful Component: Term By Year nodes
info Creating 442 Contentful Component: Amount Range and Term nodes
info Creating 1 Contentful Component: Tabs and Accordion nodes
info Creating 3 Contentful Component: Tab nodes
info Creating 1 Contentful Component: Loan Products Modal nodes
info Creating 3 Contentful Component: Global Application Variables nodes
info Creating 551 Contentful asset nodes
success Contentful: Create nodes (nnigwk0legme-QA-Release-1.4.0) - 3.054s
success Checking for changed pages - 0.000s
success source and transform nodes - 5.265s
success building schema - 272.693s
info Skipping Page :: ID: 3OVxsORdOJ665kOa1PsP1H - Slug: 404
info Skipping Page :: ID: 3OVxsORdOJ665kOa1PsP1H - Slug: 404
success createPages - 0.817s
success createPagesStatefully - 0.075s
info Total nodes: 22517, SitePage nodes: 192 (use --verbose for breakdown)
success Checking for changed pages - 0.000s
success Cleaning up stale page-data - 0.006s
warning There are conflicting field types in your data.

If you have explicitly defined a type for those fields, you can safely ignore this warning message.
Otherwise, Gatsby will omit those fields from the GraphQL schema.

If you know all field types in advance, the best strategy is to explicitly define them with the `createTypes` action, and skip inference with the `@dontInfer` directive.
See https://www.gatsbyjs.org/docs/actions/#createTypes
SitePage.context.seo.keywords:
- type: array
value: [ ..., [32m'Point of sale'[39m, ... ]
- type: string
value: [32m''[39m
success update schema - 81.119s
success onPreExtractQueries - 0.001s
success extract queries from components - 84.479s
success write out redirect data - 0.001s
success Build manifest and related icons - 0.090s
success onPostBootstrap - 0.094s
info bootstrap finished - 447.644s
success run static queries - 3.014s - 62/62 20.57/s
success run page queries - 0.231s - 192/192 830.59/s
success write out requires - 0.014s
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

gatsby-node.js

/* eslint-disable camelcase */
const path = require('path');

// Pages that are defined in the pages directory
const STATIC_DEFINED_PAGES = ['404'];

const LAYOUT_LOOKUP = {
  ContentfulPageContactUs: 'contactUs/ContactUs.js',  
  ContentfulPageLandingPage: 'homePage/homePage.js',
};

const fetchAllComposePages = async ({ graphql, locales }) =>
  /* eslint implicit-arrow-linebreak: ["error", "below"] */
  graphql(`
    {
      allContentfulComposePage(filter: { node_locale: { in: ${locales} } }) {
        nodes {
          contentful_id
          title
          node_locale
          slug
          seo {
            no_follow
            no_index
            description
            name
            keywords
            title
          }
          content {
            __typename
          }
        }
      }
    }
  `);

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  let locales = '';

  if (process.env.GATSBY_LOCALE === 'qc') {
    locales = '["en", "fr"]';
  } else {
    // Default to ROC locales
    locales = '["en-CA", "fr-CA"]';
  }

  const result = await fetchAllComposePages({ graphql, locales });

  result.data.allContentfulComposePage.nodes.map((node) => {
    const { contentful_id: id, slug, seo } = node;
    const content = node.content || [{}];
    const { __typename: template } = content;

    if (STATIC_DEFINED_PAGES.includes(slug)) {
      // These pages are generated in the `/pages` directory,
      // No need to generate a layout page for them here
      // eslint-disable-next-line no-console
      console.info(`Skipping Page :: ID: ${id} - Slug: ${slug}`);
      return;
    }

    if (!template) {
      // eslint-disable-next-line no-console
      console.info(`No Layout Found :: ID: ${id} - Slug: ${slug}`);
      return;
    }

    let layout = '';

    if (LAYOUT_LOOKUP[template]) {
      layout = LAYOUT_LOOKUP[template];
    } else {
      // eslint-disable-next-line no-console
      console.info(`No Layout Found :: ID: ${id} - Slug: ${slug}`);
      layout = 'base/BaseTemplate.js';
    }

    if (!seo) {
      // eslint-disable-next-line no-console
      console.info(`No SEO Found for: ${slug}`);
    }

    createPage({
      path: node.slug,
      component: path.resolve(`src/layouts/${layout}`),
      context: {
        pathSlug: slug,
        pageId: id,
        seo: {
          name: seo.name ? seo.name : '',
          description: seo.description ? seo.description : '',
          keywords: seo.keywords ? seo.keywords : '',
          title: seo.title ? seo.title : '',
          no_follow: seo.no_follow ? seo.no_follow : false,
          no_index: seo.no_index ? seo.no_index : false,
        },
      },
    });
  });
};

// Adds the locale to pageContext for all pages and templates
exports.onCreatePage = ({ page }) => {
  const lang = page.context.intl.language;
  const locale = `${lang}-CA`;
  page.context.locale = locale;
  return page;
};

homepage.js : Like this way the pages for my app were generated

import React from 'react';
import { graphql } from 'gatsby';
import BaseTemplate from '../base/BaseTemplate';
import CalculatorContainer from '../../Containers/PaymentCalculator/CalculatorContainer';
import HeroBannerContainer from '../../Containers/HeroBannerContainer';
import ValuePropositionContainer from '../../Containers/ValuePropositionContainer';
import LoanProductContainer from '../../Containers/LoanProductContainer';
import OurServicesContainer from '../../Containers/OurServicesContainer';
import StepsAndImageContainer from '../../Containers/StepsAndImageContainer';
import FinancialEducationContainer from '../../Containers/FinancialEducationContainer';
import AcademyArticlesContainer from '../../Containers/AcademyArticlesContainer';
import FeefoReviewsContainer from '../../Containers/FeefoReviewsContainer';
import ContainerWrapper from '../../components/ContainerWrapper/ContainerWrapper';
import './homePage.css';

export const query = graphql`
  query($pageId: String!, $locale: String = "en-CA") {
    contentfulComposePage(
      contentful_id: { eq: $pageId }
      node_locale: { eq: $locale }
    ) {
      content {
        ... on ContentfulPageLandingPage {
          applyNowReference {
            contentful_id
          }
          applyNowMobileReference {
            contentful_id
          }
          heroBannerReference {
            contentful_id
          }
          valuePropositionReference {
            contentful_id
          }
          homePageCalulator {
            contentful_id
          }
          ourProductsAndServicesReference {
            contentful_id
          }
          ourServiceReference {
            contentful_id
          }
          applyInThreeSteps {
            contentful_id
          }
          financialEducationReference {
            contentful_id
          }
          academyArticleReference {
            contentful_id
          }
          feefoReviewsReference {
            contentful_id
          }
          notificationBarReference {
            contentful_id
          }
          requireDocumentsReference {
            contentful_id
          }
        }
      }
    }
  }
`;

const HomePage = (props) => {
  const {
    heroBannerReference,
    valuePropositionReference,
    homePageCalulator,
    ourProductsAndServicesReference,
    ourServiceReference,
    applyInThreeSteps,
    financialEducationReference,
    academyArticleReference,
    feefoReviewsReference,
    applyNowReference,
    applyNowMobileReference,
    notificationBarReference,
    requireDocumentsReference,
  } = props?.data?.contentfulComposePage?.content || {};



  return (
    <BaseTemplate
      props={props}
      applyNowReference={applyNowReference}
      applyNowMobileReference={applyNowMobileReference}
      notificationBarReference={notificationBarReference}
      requireDocumentsReference={requireDocumentsReference}
    >
      <div className="homepage-container">
        <ContainerWrapper>
          <HeroBannerContainer
            contentFulID={heroBannerReference?.contentful_id}
          />
        </ContainerWrapper>
        <ContainerWrapper>
          <ValuePropositionContainer
            contentFulID={valuePropositionReference?.contentful_id}
            specialCaseFR
          />
        </ContainerWrapper>
        <ContainerWrapper>
          <CalculatorContainer
            contentFulID={homePageCalulator?.contentful_id}
          />
        </ContainerWrapper>
        <ContainerWrapper>
          <LoanProductContainer
            contentFulID={ourProductsAndServicesReference?.contentful_id}
          />
        </ContainerWrapper>
        <ContainerWrapper>
          <OurServicesContainer
            contentFulID={ourServiceReference?.contentful_id}
          />
        </ContainerWrapper>
        <ContainerWrapper>
          <StepsAndImageContainer
            contentFulID={applyInThreeSteps?.contentful_id}
          />
        </ContainerWrapper>

        <ContainerWrapper>
          <FinancialEducationContainer
            contentFulID={financialEducationReference?.contentful_id}
          />
        </ContainerWrapper>
        <ContainerWrapper>
          <FeefoReviewsContainer
            contentFulID={feefoReviewsReference?.contentful_id}
          />
        </ContainerWrapper>
        <ContainerWrapper>
          <AcademyArticlesContainer
            contentFulID={academyArticleReference?.contentful_id}
          />
        </ContainerWrapper>
      </div>
    </BaseTemplate>
  );
};
export default HomePage;


ContactUs.js :

/* eslint-disable react-hooks/rules-of-hooks */
import React from 'react';
import { graphql } from 'gatsby';
import BaseTemplate from '../base/BaseTemplate';
import ContactUsTilesContainer from '../../Containers/ContactUsTilesContainer';
import BranchLocatorContainer from '../../Containers/BranchLocatorContainer';
import AutoLoansContainer from '../../Containers/AutoLoansContainer';
import FaqContainer from '../../Containers/FaqContainer';
import Typography from '../../components/Typography';
import LPPClaimContainer from '../../Containers/LPPClaimContainer';
import PaddedContainer from '../../components/PaddedContainer';
import BreadcrumbsContainer from '../../Containers/BreadcrumbsContainer';
import ContainerWrapper from '../../components/ContainerWrapper/ContainerWrapper';

import './contactUs.css';

export const query = graphql`
  query($pageId: String!, $locale: String = "en-CA") {
    contentfulComposePage(
      contentful_id: { eq: $pageId }
      node_locale: { eq: $locale }
    ) {
      node_locale
      title

      content {
        ... on ContentfulPageContactUs {
          notificationBarReference {
            contentful_id
          }
          breadcrumbReference {
            contentful_id
          }
          applyNowReference {
            contentful_id
          }
          applyNowMobileReference {
            contentful_id
          }
          contactUsReference {
            contentful_id
          }
          faqReference {
            contentful_id
          }
          branchLocatorRefernce {
            contentful_id
          }
          autoLoanRefernce {
            contentful_id
          }
          lppClaimReference {
            contentful_id
          }
          contactUsHeader
          contactUsHeader2
        }
      }
    }
  }
`;

const contactUs = (props) => {
  const {
    contactUsHeader,
    contactUsHeader2,
    contactUsReference,
    lppClaimReference,
    faqReference,
    branchLocatorRefernce,
    autoLoanRefernce,
    breadcrumbReference,
    applyNowMobileReference,
    applyNowReference,
    notificationBarReference,
  } = props?.data?.contentfulComposePage?.content;

  return (
    <div id="contact_us">
      <BaseTemplate
        props={props}
        applyNowReference={applyNowReference}
        applyNowMobileReference={applyNowMobileReference}
        notificationBarReference={notificationBarReference}
      >
        <PaddedContainer className="contactUs-header-wrapper">
          <ContainerWrapper>
            <BreadcrumbsContainer
              contentFulID={breadcrumbReference?.contentful_id}
            />
          </ContainerWrapper>
          <div className="contactUs-content-wrapper">
            <Typography
              className="contactUs-header"
              component="h1"
              variant="h1-styling bold"
            >
              {contactUsHeader}
            </Typography>
            <Typography
              className="contactUs-header"
              component="h1"
              variant="h1-styling bold"
            >
              {contactUsHeader2}
            </Typography>
          </div>
        </PaddedContainer>
        <ContainerWrapper>
          <ContactUsTilesContainer
            contentFulID={contactUsReference?.contentful_id}
          />
        </ContainerWrapper>
        <ContainerWrapper>
          <BranchLocatorContainer
            contentFulID={branchLocatorRefernce?.contentful_id}
            checkLocation
          />
        </ContainerWrapper>
        <ContainerWrapper>
          <AutoLoansContainer contentFulID={autoLoanRefernce?.contentful_id} />
        </ContainerWrapper>
        <ContainerWrapper>
          <LPPClaimContainer contentFulID={lppClaimReference?.contentful_id} />
        </ContainerWrapper>
        <ContainerWrapper>
          <FaqContainer contentFulID={faqReference?.contentful_id} />
        </ContainerWrapper>
      </BaseTemplate>
    </div>
  );
};

export default contactUs;


Source: React – Stack Overflow

November 18, 2021
Category : News
Tags: contentful | gatsby | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.