How to Make the Loading Bar Disappear: A Complete Guide to Code Splitting in React

Photo by Aziz Acharki on Unsplash

Background/Bundling

When first starting a new project in React, many of us used such tools as Create React App, Next.js, or Gatsby. Using these tools, files are “bundled” using tools like Webpack, Rollup or Browserify. Bundling is the process of following imported files and merging them into a single file: a “bundle”. This bundle can then be included on a webpage to load an entire app at once.

Why do we need bundles?

Bundles were initially created to optimise the number of HTTP requests it would have taken to download multiple files. Additionally, they enable the browser to run your application like it was written using just JavaScript.

What does this mean for your imports?

ECMAScript modules are completely static: you must specify what you import and export at compile time and can’t react to changes at runtime.

STATIC
import module from './dir/module';
  1. The import declaration can only appear at the top level of a module.
  2. They only accept a string literal as the module specifier.

Code Splitting overview

Yup, this is exactly what we’re doing.
const moduleSpecifier = './dir/someModule.js';
import(moduleSpecifier)
.then(someModule => someModule.foo());
  • The parameter is a string similar to the import declarations most of us currently use. However, with dynamic import(), the parameter can be any expression whose result can be coerced to a string.
  • The result of the “function call” is a Promise. Therefore anything called within then can be executed once the module is completely loaded.

Use Cases

There are three main use cases for code splitting.

1) Loading code on demand

Code can be loaded based on user actions, such as clicking on a link or scrolling to a certain position on the page.

2) Conditional loading of modules

Sometimes you may want to load a module depending on whether a condition is true.

3) Computed module specifiers

Some variables aren’t set until runtime or may change based on state/props. In this case, an interpolated string would work for the module specifier unlike in static import declarations.

High Order Components for Code Splitting

There are 2 primary high-order components used for code splitting: Lazy and Loadable.

Lazy

Loadable

According to the Loadable documentation:

Fun facts

  • import() can be used from scripts, not just from modules.
  • If import() is used in a module, it can occur anywhere at any level, and is not hoisted.
  • import() accepts arbitrary strings (with runtime-determined template strings shown here), not just static string literals.
  • The presence of import() in the module does not establish a dependency which must be fetched and evaluated before the containing module is evaluated.
  • import() does not establish a dependency which can be statically analyzed. (However, implementations may still be able to perform speculative fetching in simpler cases like import("./foo.js").)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store