Learn

There’s another category of techniques to make our apps faster, which involves only sending the necessary parts of our React code when the user needs them. This is called code splitting.

When we build a React app, all of the code in our app is gathered into one file called a bundle, which users download when they request our app. That means that users download all of our application code when they load our app for the first time. As our apps grow in complexity, so will our app’s bundle size. This will make it take longer for a user to download and load our app, especially if they are on a slow internet connection.

One way to make our app faster is to split out large modules from our app’s bundle into their own chunks. A chunk is a smaller JavaScript file that will be sent to a user separate from the bundle. A chunk can be loaded after the bundle loads, leading to a performance improvement.

Normally, we would import a module, like 'moment', into our app like this:

import moment from 'moment';

// ...

function onClick() {
  setDate(moment(new Date()).format('MM/D/YYYY'))
}

When we look in the Developer Tools Network tab, we can see that all of our app’s code was bundled into our app’s bundle.js. The bundle.js file below includes the moment library inside of it:

bundle.js network request

Instead, we want to only send the contents of the moment module when the user interacts with a feature that requires moment. To do this, we can use the import() syntax to load it as its own chunk:

async function onClick() {
  const moment = await import('moment');
  setDate(moment.default(new Date()).format('MM/D/YYYY'))
}

The import() syntax is based on JavaScript Promises, so we use await to wait for the Promise to resolve and mark the function as async. Also, we have to add .default to moment after importing it with import() to make sure we select the default export from moment.

Now when we look in the Network tab and we see that the moment module is now its own chunk, downloaded separately from the bundle:

moment network request

The last chunk listed in the image above (“vendors-node_modules_moment_moment.chunk.js”) is the moment module.

Instructions

Task 1

Go to the project’s home page (‘/‘), and then click on “Exercise 5: Code Splitting Modules”.

Task 2

On this page, the user can click the “View Details” button to learn more about their restaurant reservation. In the details of the reservation, there is a date that we are formatting with the moment module. This module is large and we want to load it as its own chunk. Why might we want to make moment into its own chunk?

Hint

Including moment in our main bundle will make every user download the entire library when they load our app. Some users may not click this button to view more details, so we can save those users from downloading the moment library by making it into its own chunk, separate from the main bundle.

Task 3

Open the Network Tab in the Developer Tools and reload the page.

Note: We might need to right click on the reload icon in our browser, then select “Empty Cache and Hard Reload” to make sure our browser does not cache any network requests.

Take note of the “bundle.js” size.

Task 4

Open ./src/pages/Exercise5/index.js. In the onClick() function, we use moment to format a date. Implement the import() syntax to load moment in its own chunk.

Hint

First, remove the following line from the file:

import moment from 'moment';

Then, use import() inside the onClick() function to load moment. Its syntax follows this pattern:

async function onClick() {
  const exampleModule = await import('exampleModule');
}

Then, make sure to update moment to use its default export with syntax like this:

async function onClick() {
  const exampleModule = await import('exampleModule');
  exampleModule.default(...)
}

If you’re stuck, you can find the solution code in ./src/pages/Exercise5/solution/index.js.

Task 5

Reload the page and open the Network tab in the Developer Tools. Again, we might need to right click on the browser’s reload button and select “Empty Cache and Hard Reload”.

Notice that the bundle.js size has decreased by multiple kilobytes.

Now, click the “View Details” button in the app. Upon clicking, we should see another line item show up in the Network tab, named “vendors-node_modules_moment_moment.chunk.js”. Beside it, we can see how large the moment library is and that it was loaded separately from our main bundle.

Sign up to start coding

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?