RahulRachhoya Bundle Optimization
Strategies
- Code splitting — split by route, component, or library. Load on demand
- Tree shaking — remove unused exports. Only import what you need
- Dependency analysis — find large or duplicate dependencies (
webpack-bundle-analyzer) - Lazy loading — load heavy components only when needed (
React.lazy, dynamic imports) - Compression — enable gzip/brotli at the server/CDN level
Targets
- Initial JS bundle: <200KB (gzipped)
- Initial CSS bundle: <50KB (gzipped)
- Time to interactive: <3s on 4G
Techniques
// Good: code-split by route
const Dashboard = () => import('./Dashboard')
// Good: import only what you need
import { format } from 'date-fns' // not `import dateFns from 'date-fns'`
// Bad: whole library import
import _ from 'lodash'
Tooling
webpack-bundle-analyzer/vite-bundle-analyzer— visualize bundle compositionbundlesize/size-limit— enforce bundle size budgets in CIpurgecss— remove unused CSS- Use ES modules for better tree shaking