Using Dynamic Imports
Explore how dynamic imports enable code splitting in React applications. Understand how to use React.lazy with dynamic import syntax to lazy load components, reduce bundle size, and improve app performance by loading resources only when needed. This lesson covers practical examples and the use of React.Suspense for loading states.
We'll cover the following...
We'll cover the following...
Dynamic import syntax
Dynamic import syntax is an extension of this syntax and allows us to dynamically lazy-load imports. Dynamic imports are similar to a Promise:
// greeter.js
export sayHi = (name) => `Hi ${name}!`;
// app.js
import("./greeter").then(greeter => {
console.log(greeter.sayHi('Manuel'));
});
When Webpack finds a dynamic import, it ...