Referencing chunks in current page HTML

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 just before the terminal </body> tag, both of which refer to the JavaScript runtime and client-side JavaScript relevant to that page. The Gatsby runtime bundle, named app, acquires all chunk asset files for pages and components by searching across assetsByChunkName items using componentChunkName. Gatsby then merges these two chunk asset arrays together, and each chunk is referred to in a <link> element as follows:

<link
  as="script"
  rel="preload" 
  key="app-2e49587d85e03a033f58.js"
  href="/app-2e49587d85e03a033f58.js"
/>

The rel attribute instructs the browser to begin downloading this resource at a high priority due to the fact that it is likely to be referenced later in the document. At the end of the HTML body, in the case of JavaScript assets, Gatsby inserts the <script> element referencing the preloaded asset:

<script
  key="app-2e49587d85e03a033f58.js"
  src="app-2e49587d85e03a033f58.js"
  async
/>

In the case of a CSS asset, the CSS is injected directly into the HTML head inline:

<style
  data-href="/1.93002d5bafe5ca491b1a.css"
  dangerouslySetInnerHTML="...contents of public/1.93002d5bafe5ca491b1a.css"
/>