Dynamic imports and bundles

The code examples in this book are using the create-react-app tooling for creating bundles. The nice thing about this approach is that you don't have to maintain any sort of bundle configuration. Instead, bundles are created for you automatically, based on how you import your modules. If you're using the import statement everywhere, your app will be downloaded all at once in one bundle. When your app gets bigger, there are likely going to be features that some users never use or don't use as frequently as others. You can use the import() function to import modules on demand. By using this function, you're telling webpack to create a separate bundle for the code that you're importing dynamically.

Let's take a look at a simple component that we might want to bundle separately from the rest of the application:

import React from "react";

export default function MyComponent() {
  return <p>My Component</p>;
}

Now...