The async-requires.js file

Like sync-requires.js, async-requires.js is dynamically created by Gatsby, but its motivation differs in that it is intended to be leveraged for code splitting by Webpack. Instead of utilizing require to include components by path, this file employs the import keyword together with webpackChunkName hints to connect the dots between a given listed componentChunkName and the resulting file. Because components is a function, it can be lazily initialized.

The async-requires.js file also exports a data function importing data.json, the final file covered in this section. The following code snippet illustrates an example of a generated async-requires.js file:

exports.components = {
  "component---src-blog-2-js": () =>
    import(
      "/home/site/src/blog/2.js"
      /* webpackChunkName: "component---src-blog-2-js" */
    ),
  // more components
}

exports.data = () => import("/home/site/.cache/data.json")

While sync-requires.js is leveraged by Gatsby during static page HTML generation, the async-requires.js file is instead used during the JavaScript application bundling process.