Using the lazy API
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. Second, 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. Let's look at both of these.
Dynamic imports and bundles
The code examples in this book use the create-react-app
tooling for creating bundles. The nice thing about this approach is that you don't have to maintain any 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 will likely be features that some users never use or don't use as frequently...