Gatsby is not code splitting and is instead one single large file

[dungle-scrubs]

I'm developing two eCommerce projects side-by-side with almost identical setups and one is code-splitting while the other one isn't and I'm hoping someone else has come across this as well. I can't share the repos unfortunately, but I can do my best to describe what's happening.

I'm running Gatsby v3.8.0

Basically when Gatsby builds, no chunked files are created. Instead it's a single file called for every page, which always looks like this: app-07541bfa59d6b862aa7a.js and it's huge, around 800k gzipped.

The Gatsby docs on code splitting is helping me narrow it down but I'm stuck.

Inside .cache, async-requires.js looks as it should:

// prefer default export if available
const preferDefault = m => (m && m.default) || m

exports.components = {
  "component---src-templates-about-index-js": () => import("./../../../src/templates/about/index.js" /* webpackChunkName: "component---src-templates-about-index-js" */),
  "component---src-templates-account-index-js": () => import("./../../../src/templates/account/index.js" /* webpackChunkName: "component---src-templates-account-index-js" */),
  "component---src-templates-blog-index-js": () => import("./../../../src/templates/blog/index.js" /* webpackChunkName: "component---src-templates-blog-index-js" */),
  "component---src-templates-bundle-index-js": () => import("./../../../src/templates/bundle/index.js" /* webpackChunkName: "component---src-templates-bundle-index-js" */),
  "component---src-templates-cart-index-js": () => import("./../../../src/templates/cart/index.js" /* webpackChunkName: "component---src-templates-cart-index-js" */),
  "component---src-templates-charity-index-js": () => import("./../../../src/templates/charity/index.js" /* webpackChunkName: "component---src-templates-charity-index-js" */),
  "component---src-templates-collection-index-js": () => import("./../../../src/templates/collection/index.js" /* webpackChunkName: "component---src-templates-collection-index-js" */),
  "component---src-templates-contact-index-js": () => import("./../../../src/templates/contact/index.js" /* webpackChunkName: "component---src-templates-contact-index-js" */),
  "component---src-templates-faq-index-js": () => import("./../../../src/templates/faq/index.js" /* webpackChunkName: "component---src-templates-faq-index-js" */),
  "component---src-templates-home-index-js": () => import("./../../../src/templates/home/index.js" /* webpackChunkName: "component---src-templates-home-index-js" */),
  "component---src-templates-list-collections-index-js": () => import("./../../../src/templates/listCollections/index.js" /* webpackChunkName: "component---src-templates-list-collections-index-js" */),
  "component---src-templates-not-found-index-js": () => import("./../../../src/templates/notFound/index.js" /* webpackChunkName: "component---src-templates-not-found-index-js" */),
  "component---src-templates-post-index-js": () => import("./../../../src/templates/post/index.js" /* webpackChunkName: "component---src-templates-post-index-js" */),
  "component---src-templates-privacy-policy-index-js": () => import("./../../../src/templates/privacyPolicy/index.js" /* webpackChunkName: "component---src-templates-privacy-policy-index-js" */),
  "component---src-templates-product-index-js": () => import("./../../../src/templates/product/index.js" /* webpackChunkName: "component---src-templates-product-index-js" */),
  "component---src-templates-refund-policy-index-js": () => import("./../../../src/templates/refundPolicy/index.js" /* webpackChunkName: "component---src-templates-refund-policy-index-js" */),
  "component---src-templates-reviews-index-js": () => import("./../../../src/templates/reviews/index.js" /* webpackChunkName: "component---src-templates-reviews-index-js" */),
  "component---src-templates-shipping-policy-index-js": () => import("./../../../src/templates/shippingPolicy/index.js" /* webpackChunkName: "component---src-templates-shipping-policy-index-js" */),
  "component---src-templates-terms-index-js": () => import("./../../../src/templates/terms/index.js" /* webpackChunkName: "component---src-templates-terms-index-js" */)
}

But after the build in /public, chunk-map.json ends up like this

{"polyfill":["/polyfill-079897e4f56cc1b5eff3.js"],"app":["/app-07541bfa59d6b862aa7a.js"]}

While webpack.stats.json looks like this

{
  "namedChunkGroups": {
    "polyfill": {
      "name": "polyfill",
      "assets": [
        { "name": "webpack-runtime-f6297ef1c9419f09bd96.js", "size": 4041 },
        { "name": "polyfill-079897e4f56cc1b5eff3.js", "size": 82653 }
      ],
      "filteredAssets": 0,
      "assetsSize": 86694,
      "filteredAuxiliaryAssets": 2,
      "auxiliaryAssetsSize": 218017
    },
    "app": {
      "name": "app",
      "assets": [
        { "name": "webpack-runtime-f6297ef1c9419f09bd96.js", "size": 4041 },
        { "name": "framework-04e6f1af35bb290a42c1.js", "size": 129980 },
        { "name": "styles.4839ba0c61a2a30318da.css", "size": 46531 },
        { "name": "11100001-f3e3e050d3251f21ca38.js", "size": 157809 },
        { "name": "dcdeed2c-9803790d092113612520.js", "size": 304845 },
        { "name": "app-adaa81bb505862d6eb6a.js", "size": 4167312 }
      ],
      "filteredAssets": 0,
      "assetsSize": 4810518,
      "filteredAuxiliaryAssets": 12,
      "auxiliaryAssetsSize": 12333872
    }
  },
  "assetsByChunkName": {
    "polyfill": [
      "webpack-runtime-f6297ef1c9419f09bd96.js",
      "polyfill-079897e4f56cc1b5eff3.js"
    ],
    "app": [
      "webpack-runtime-f6297ef1c9419f09bd96.js",
      "framework-04e6f1af35bb290a42c1.js",
      "styles.4839ba0c61a2a30318da.css",
      "11100001-f3e3e050d3251f21ca38.js",
      "dcdeed2c-9803790d092113612520.js",
      "app-adaa81bb505862d6eb6a.js"
    ]
  },
  "childAssetsByChunkName": {}
}

In /public/_headers, you can see that the chunk bundles are missing, so it seems like webpack thinks everything is shared under the same app bundle.

/collections/all
  Link: </webpack-runtime-9b7779fba325bd4ea5cf.js>; rel=preload; as=script
  Link: </framework-04e6f1af35bb290a42c1.js>; rel=preload; as=script
  Link: </11100001-f3e3e050d3251f21ca38.js>; rel=preload; as=script
  Link: </dcdeed2c-9803790d092113612520.js>; rel=preload; as=script
  Link: </app-07541bfa59d6b862aa7a.js>; rel=preload; as=script
  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
  Link: </page-data/collections/all/page-data.json>; rel=preload; as=fetch; crossorigin

I understand that Gatsby only sees the componentChunkName, so it's just going with the bad webpack.stats.json that webpack is producing. I'm not modifying webpack through gatsby-node.js.

So I don't know how to start troubleshooting. Anyone else have some insight? Also what other information should I provide that will make this easier?

Thanks

[wardpeet]

@dungle-scrubs it would mean that you have a lot of dependencies inside wrapRootElement, shared on all pages, ...

Any chance you can share the repo?

[dungle-scrubs]

@wardpeet I was using wrapRootElement and now believe that's where it started. After, I moved all of that into wrapPageElement and the problem was still existing. Then it started going away on local builds but persisted on Netlify builds (must have been some caching issues?)

Then I updated a few outdated dependencies and the problem completely disappeared. So I think what you pointed out was definitely the cause, although I'm not sure why it continued for a while after I changed it. (I would share the repo if I could, but it's private)

Appreciate the insight!

[wardpeet]

I don't have enough insights in Netlify build process, if you're using cache plugins you might end up with weird behavior. When using wrapRootElement it means it will become part of app.js (so global dependency)