There are two pieces involved with using the new lazy() API in React. First, there's bundling components into their own separate files so that they can be downloaded by the browser separately from other parts of the application. Secondly, once you have created the bundles, you can build React components that are lazy—they don't download anything until the first time they're rendered.
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...