Category: Uncategorized

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…

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…

The sync-requires.js file is a dynamically created JavaScript file that exports individual Gatsby components, generated by iterating over the Redux components namespace. In these exports, the keys represent the componentChunk name (e.g., component—src-blog-2-js), and values represent expressions requiring the component (e.g., require(“/home/site/src/blog/2.js”)), to yield a result like the following: This file is employed during the execution of static-entry.js to map each component’s componentChunkName to its respective component implementation.…

The pages.json file represents a list of Page objects that are generated from the Redux pages namespace, accounting for the componentChunkName, jsonName, path, and matchPath for each respective Page object. These Page objects are ordered such that those pages having a matchPath precede those that lack one, in order to support the work of cache-dir/find-page.js in selecting pages based on regular expressions prior to attempting explicit paths. Example output for a given Page object appears as follows:…

Among the final bootstrap phases before Gatsby hands off the site to Webpack for bundling and code optimization is the process of writing out pages. Because Webpack has no awareness of Gatsby source code or Redux stores and operates on only files in Gatsby’s .cache directory, Gatsby needs to create JavaScript files for behavior and JSON files for…