Next.js logo

Dynamic Import Bundle Size Demo

This demo shows how next/dynamic can help reduce initial bundle size by code-splitting heavy components. Open your browser's DevTools Network tab to see the difference!

📊 Bundle Size Impact

❌ Regular Imports

  • • All components loaded immediately
  • • Chart.js (~200KB) in main bundle
  • • Lodash (~70KB) in main bundle
  • • date-fns (~20KB) in main bundle
  • • Larger initial bundle = slower page load

✅ Dynamic Imports

  • • Components loaded only when needed
  • • Separate chunks for each heavy library
  • • Smaller initial bundle
  • • Faster initial page load
  • • Better Core Web Vitals scores
🟢 RSC vs Dynamic Demo📊 View Bundle Analysis

❌ Regular Imports (Heavy Bundle)

These components are imported normally and included in the main bundle.

✅ Dynamic Imports (Code-Split)

These components are loaded dynamically and split into separate chunks.

🔍 How to See the Difference

  1. Open your browser's Developer Tools (F12)
  2. Go to the Network tab and clear it
  3. Reload this page and observe the initial bundle size
  4. Click on the "Regular Import" buttons and see no new network requests
  5. Click on the "Dynamic Import" buttons and see new chunks being loaded
  6. Compare the timing and file sizes in the Network tab