Write Out Pages
This documentation isn’t up to date with the latest version of Gatsby.
Outdated areas are:
data.jsonshould be replaced with
- remove mentions of
You can help by making a PR to update this documentation.
This is one of the last bootstrap stages before we hand off to webpack to perform code optimization and code splitting. webpack builds a web bundle. It has no knowledge of Gatsby’s core code. Instead, it operates only on files in the
You can think of this step as taking all the data that was generated during bootstrap and saving it to disk for consumption by webpack.
Most of the code backing this section is in pages-writer.js
The dynamic files that are created are (all under the
This is a collection of page objects, created from Redux
pages namespace. For each page it includes the
pages.json is generated for
gatsby develop purposes only. In
npm run build, we use data.json (below) which includes the pages info plus more.
components. It is an object created by iterating over the
components Redux namespace. The keys are the componentChunkName (e.g.
component---src-blog-2-js), and the values are expressions that require the component. E.g.
/home/site/src/blog/2.js. The file will look something like this:
It is used during static-entry.js so that it can map componentChunkNames to their component implementations. Whereas the production-app.js must use
async-requires.js (below) since it performs code splitting.
async-requires.js is very similar to
require with the component’s path, it uses
import and adds a
webpackChunkName hint so that we can eventually link the componentChunkName to its resulting file (more info in Code Splitting docs).
components is a function, so that it can be lazily initialized.
async-requires.js also exports a
data function that imports
data.json (see below)
An example of async-requires is:
data.json is used in two places. First, it’s lazily imported by
async-requires.js (above), which in turn is used by
production-app to load JSON results for a page.
It is also used by Page HTML Generation in two ways:
page-renderer.jswebpack bundle that generates the HTML for a path. It requires
data.jsonand uses the
pagesto look up the page for the page.
- To get the
jsonNamefrom the page object, and uses it to construct a resource path for the actual JSON result by looking it up in
Now that Gatsby has written out page data, it can start on the webpack section.