Detailed comparison of bundle sizes and performance metrics between regular imports and dynamic imports.
← Back to DemoIncludes Chart.js, Lodash, date-fns, and all components
Complete charting library loaded upfront
Utility library loaded immediately
Date formatting library in main bundle
Only core app code and React
Loaded only when chart is requested
Loaded only when table is requested
Loaded only when calculator is requested
75% smaller initial bundle!
| Core Web Vital | Regular Imports | Dynamic Imports | Improvement |
|---|---|---|---|
| First Contentful Paint (FCP) | 2.1s | 1.4s | 33% faster |
| Largest Contentful Paint (LCP) | 2.8s | 1.9s | 32% faster |
| Time to Interactive (TTI) | 3.5s | 2.2s | 37% faster |
| Total Blocking Time (TBT) | 400ms | 200ms | 50% reduction |
// ❌ Regular import - included in main bundle
import HeavyComponent from './HeavyComponent';
// ✅ Dynamic import - code-split into separate chunk
const DynamicHeavyComponent = dynamic(
() => import('./HeavyComponent'),
{
loading: () => <LoadingSpinner />,
ssr: false // Disable SSR if not needed
}
);