Enabling Code Splitting and Prefetching

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 and the site developer.

When you load pages in the browser, there is no need to load all the scripts and stylesheets required by the other pages in the site, except when you need to prefetch them to enable instantaneous navigation. The final work Gatsby does during the bundling process is to ensure that the right JavaScript is in the correct places for Webpack to perform the appropriate code splitting.

NOTE

For more information about how Gatsby performs fetching and caching of resources in both Gatsby core and gatsby-plugin-offline, consult the documentation’s guide to resource handling and service workers.