Split large JavaScript bundles

A 500 KB JavaScript bundle blocks page interactivity for 3–5 seconds on a mid-range mobile device even after the bytes arrive — JS must be parsed and compiled before execution. Code splitting means users only download and parse the code they actually need for the current page, dramatically improving Time to Interactive.

Quick Reference

• Use dynamic import() to load code only when it's actually needed
• Split routes in SPAs so each page loads only its own code
• Lazy-load heavy third-party libraries (chart libraries, rich text editors)
• Analyze your bundle with a visualizer to find what to split

Check

Identify any large third-party imports or feature modules in this file that could be loaded lazily with dynamic import() instead of statically.

Fix

Convert the identified static imports to dynamic imports using import() and add appropriate loading states.