Category: 14. Gatsby Internals

In this whirlwind tour of Gatsby’s internals, we walked through some of the most compelling layers of Gatsby’s multifaceted build lifecycle and bundling process. Though it would require a separate app in its own right to comprehensively cover how Gatsby works under the hood, in this section we examined the most important considerations, including key…

The previous section accounts for how chunks handled by Webpack are referenced in the page HTML for the current page. But what about subsequent navigation to other pages, which need to be able to load any required JavaScript or CSS assets instantaneously? When the current page has finished loading, Gatsby’s work isn’t done; it proceeds down…

These two files, webpack.stats.json and chunk-map.json, are then loaded by static-entry.js to search for chunk assets matching individual componentChunkName values during the construction of <link> and <script> elements for the current page and the prefetching of chunks for later navigation. Let’s inspect each of these in turn. First, after generating the HTML for the currently active page, static-entry.js creates the necessary <link> elements in the head of the current page and <script> elements…

To generate the mappings required for client-side navigation and future instantaneous loads, Gatsby needs to create: <link> and <script> elements that correspond to the Gatsby runtime chunk The relevant page chunk for the given page (e.g., with a content hash, component–src-blog-js-2e49587d85e03a033f58.js) At this point, however, Gatsby is aware of only the componentChunkName, not the generated filename that it needs to reference…

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: As we saw in the previous section, the entry point to Webpack (production-app.js) needs this async-requires.js file…

In Gatsby, code splitting leverages a Webpack feature known as dynamic splitting in two cases: To split imported files into separate bundles if Webpack encounters an import function call To include them in the original bundle if the module in question is loaded through require However, Webpack leaves the rest of the question of what modules to split up to Gatsby…

The production-app.js file is the entry point to Webpack. It yields the app-[contenthash].js file, which is responsible for all navigation and page loading subsequent to the loading of the initial HTML in the browser. On first load, the HTML loads immediately; it includes a CDATA section (indicating a portion of unescaped text) that injects page information into the window object such that it’s available in…

First, let’s walk through how Gatsby generates the JavaScript runtime that performs rehydration after the initial HTML is loaded, and all client-side work thereafter (such as the instantaneous loading of subsequent pages). There are several files involved in the process. The entry point is the build-javascript.ts file in Gatsby (located in the src/commands directory), which dynamically generates a Webpack configuration…

Once the page writing process is complete and the Gatsby bootstrap has concluded, we have a full Gatsby site ready for bundling. In this stage, Gatsby renders all finished pages into HTML through server-side rendering. Moreover, it needs to build a browser-ready JavaScript runtime that will allow for dynamic page interactions after the static HTML has…

The data.json file contains a complete manifest of the pages.json file as well as the Redux jsonDataPaths object that was created at the conclusion of the query execution process. It is lazily imported by async-requires.js, which is leveraged by production-app.js to load the available JSON results for a page. In addition, the data.json file is used during page HTML generation for two purposes: The static-entry.js file creates a Webpack…