Splitting into and naming chunks

During Gatsby’s bootstrap phase that concludes with fully written pages, the .cache/async-requires.js file is output. This file exports a components object that contains a mapping of ComponentChunkNames to functions that are responsible for importing each component’s file on disk. This may look something like the following:

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

As we saw in the previous section, the entry point to Webpack (production-app.js) needs this async-requires.js file to enable dynamic import of page component files. Webpack will subsequently perform dynamic splitting to generate distinct chunks for each of those imported files. One of the file’s exports also includes a data function that dynamically imports the data.json file, which is also code-split.

Once it has indicated where Webpack should split code, Gatsby can customize the nomenclature of those files on disk. It modifies the filenames by using the chunkFilename configuration in the Webpack configuration’s output section, set by Gatsby in webpack.config.js by default as [name]-[contenthash].js. In this naming, [contenthash] represents a hash of the contents of the chunk that was originally code-split. [name], meanwhile, originates from the webpackChunkName seen in the preceding example.

NOTE

For an introduction to Webpack chunkGroups and chunks and their use in Gatsby, consult the Gatsby documentation’s primer on chunkGroups and chunks.