Skip to main content

Performance Optimization

Bundle Analysis and Code Splitting

0:00
LearnStep 1/4

Bundle Analysis

Understanding Your Bundle

Before optimizing, you need to see what's in your bundle. Large bundles directly impact LCP and INP.

Setting Up Bundle Analyzer

bash
js
bash

Reading the Bundle Map

Common Bundle Bloat Culprits

LibrarySizeAlternative
moment.js~300KBdate-fns (~25KB tree-shaken)
lodash (full)~70KBlodash-es (tree-shaken) or native
chart.js~200KBrecharts or dynamic import
pdf-lib~400KBDynamic import + loading state

Tree Shaking Best Practices

tsx