Lazy Loading and Code Splitting
Split bundles and lazy-load components and routes.
Why Bundle Size Matters
When everything ships in one big JavaScript file, users wait longer for the first screen to appear. Code splitting breaks your app into smaller chunks loaded only when needed, shrinking the initial download and speeding up startup.
Dynamic import()
The key tool is the dynamic import() function. Unlike a static import at the top of a file, it loads a module on demand and returns a promise. Bundlers split each dynamic import into its own chunk.
const module = await import("./heavyModule.js")
module.doSomething()All lessons in this course
- Lazy Loading and Code Splitting
- Memoization Techniques
- Identifying and Fixing Bottlenecks