I am working on a large React application and have started using dynamic imports with React.lazy() to reduce the initial bundle size.
Example:
const Dashboard = React.lazy(() => import('./Dashboard'));
The application now loads multiple chunks instead of a single large bundle. While the initial JavaScript payload is smaller, I am unsure whether this is actually improving the overall user experience.
Some pages appear to load more slowly after navigation because additional chunks need to be downloaded.
I am trying to understand the trade-offs between:
A larger initial bundle
More aggressive code splitting
Route-level splitting vs component-level splitting
Network requests for multiple chunks
Browser caching benefits
What metrics or tools should be used to determine whether dynamic imports are genuinely improving performance?
Are there any guidelines for deciding when a component should be dynamically imported versus included in the main bundle?