Gatsby - Purpose of Webpack-Runtime Created in Compiled Version of Page

Hi there,

I just deployed a test Gatsby site on Netlify and I was curious what the strange scripts added to my page are used for.

At the very bottom of this page’s source: https://quizzical-bhabha-217334.netlify.com/best-parasite-lab-test, I get these scripts being loaded in:

<script id="gatsby-script-loader">/*<![CDATA[*/window.page={"componentChunkName":"component---src-pages-best-parasite-lab-test-js","jsonName":"best-parasite-lab-test-1cc","path":"/best-parasite-lab-test/"};window.dataPath="471/path---best-parasite-lab-test-1-cc-129-RFmQ0PM5Z2zi1XbyNLDID972ts";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app.7deea2c89e98ff3c731a.css","/app-675946387e30d1ba786a.js"],"component---src-pages-best-parasite-lab-test-js":["/component---src-pages-best-parasite-lab-test-js-c81acc0c836c122ee6f0.js"],"pages-manifest":["/pages-manifest-121a1f60e7ef4a9ef7ca.js"]};/*]]>*/</script><script src="/webpack-runtime-2e6e52deedb622951b3a.js" async=""></script><script src="/app-675946387e30d1ba786a.js" async=""></script><script src="/4-45f76a591687c2395a15.js" async=""></script><script src="/component---src-pages-best-parasite-lab-test-js-c81acc0c836c122ee6f0.js" async=""></script></body></html>

I google’d around a bit and found this document: Building the JavaScript App | Gatsby

And it says:

Gatsby is a static site generator. It generates your site’s HTML pages, but also creates a JavaScript runtime that takes over in the browser once the initial HTML has loaded. This enables other pages to load instantaneously. Read on to find out how that runtime is generated.

Does that mean that when someone loads a single page, then all the other pages are preloaded in the browser before people even go to them?

Or does it mean something else?

Thank you!

So looked into this, and I found that:

  • It’s a lightweight prefetch that browser preloads any of the URLs that the current page links to