Understanding Your Bundle
Before optimizing, you need to see what's in your bundle. Large bundles directly impact LCP and INP.
0:00
0% complete
LearnStep 1 of 4
Bundle Analysis
Learning Objectives
- •Analyze bundle composition
- •Implement dynamic imports
- •Optimize third-party dependencies
- •Set up performance budgets
Lesson Outline
LearnStep 1/4
Bundle Analysis
bash
js
bash
Reading the Bundle Map
Common Bundle Bloat Culprits
| Library | Size | Alternative |
|---|---|---|
| moment.js | ~300KB | date-fns (~25KB tree-shaken) |
| lodash (full) | ~70KB | lodash-es (tree-shaken) or native |
| chart.js | ~200KB | recharts or dynamic import |
| pdf-lib | ~400KB | Dynamic import + loading state |
Tree Shaking Best Practices
tsx