Code Splitting, Dynamic Imports & Package Optimization

1// app/components/DashboardAnalytics.tsx
2'use client';
3
4import dynamic from 'next/dynamic';
5import { useState } from 'react';
6
7// Lazy-load heavy Recharts or Three.js component
8// 1. ssr: false prevents server from attempting to render window/canvas-dependent code
9// 2. loading displays placeholder while the chunk downloads
10const HeavyFinancialChart = dynamic(
11  () => import('./HeavyFinancialChart'),
12  {
13    ssr: false,
14    loading: () => (
15      <div className="h-64 bg-gray-100 animate-pulse rounded flex items-center justify-center">
16        <span>Loading interactive visualization...</span>
17      </div>
18    ),
19  }
20);
21
22export function DashboardAnalytics() {
23  const [showChart, setShowChart] = useState(false);
24
25  return (
26    <div className="p-6">
27      <h2 className="text-xl font-bold mb-4">Financial Overview</h2>
28      <button
29        onClick={() => setShowChart(true)}
30        className="btn-primary mb-4"
31      >
32        View Deep Analytics
33      </button>
34
35      {/* The 250KB chart bundle is ONLY downloaded when showChart is true! */}
36      {showChart && <HeavyFinancialChart />}
37    </div>
38  );
39}