Modern web apps can be massive (5MB+). If a user has to download your whole admin panel just to see the login page, they will leave. Code Splitting allows you to break your app into small "Chunks" that are loaded only when needed.
Instead of importing a component at the top of the file, use lazy(). This tells React: "Wait until this component is actually about to be rendered, then download its code from the server."
const AdminPanel = React.lazy(() => import('./AdminPanel'));
// Usage
The best place to split code is at the **Route** level. Each page (Home, Profile, Settings) should be its own chunk. This ensures the "Initial Load" is extremely fast, as the browser only downloads what is on the current screen.
Q: "What is the difference between Lazy Loading a component and using 'Dynamic Imports' for a library?"
Architect Answer: "They use the same underlying mechanism (`import()`), but for different purposes. Lazy Loading components optimizes the **UI Render Path**. Dynamic Imports (e.g., `const moment = await import('moment')`) optimize **Utility Logic**. If you only need a heavy PDF library when the user clicks 'Download,' you should dynamically import it inside the click handler to avoid bloating the main bundle."