React
Bundle Commands
Analyze and optimize your React bundle size. Find large dependencies, implement code splitting, and ensure fast load times for your users.
3 commands
Pro Tips
Use 'npx vite-bundle-visualizer' or 'npx @next/bundle-analyzer' to visualize what's in your bundle.
Use dynamic imports: 'const Heavy = lazy(() => import("./Heavy"))' to split code at component boundaries.
Check import costs: 'npx import-cost' or use the VS Code extension to see package sizes inline.
Common Mistakes
Named imports from barrel files (index.ts) can prevent tree-shaking. Import from specific files when possible.
Moment.js adds ~70KB gzipped. Use date-fns, dayjs, or the native Intl API instead.