React Suspense and lazy loading for route-level code splitting

<p>My React app has a large JavaScript bundle. I want to split the code so users only download JS for the current page using React.lazy for component-level code splitting.</p>

<p>React.lazy with Suspense for route splitting:</p> <div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">lazy</span><span class="p">,</span><span class="w"> </span><span class="nx">Suspense</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'react'</span><span class="p">;</span> <span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">BrowserRouter</span><span class="p">,</span><span class="w"> </span><span class="nx">Routes</span><span class="p">,</span><span class="w"> </span><span class="nx">Route</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'react-router-dom'</span><span class="p">;</span> <span class="c1">// Each becomes a separate JS chunk downloaded on demand:</span> <span class="kd">const</span><span class="w"> </span><span class="nx">Dashboard</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">lazy</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="k">import</span><span class="p">(</span><span class="s1">'./pages/Dashboard'</span><span class="p">));</span> <span class="kd">const</span><span class="w"> </span><span class="nx">TraceDetail</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">lazy</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="k">import</span><span class="p">(</span><span class="s1">'./pages/TraceDetail'</span><span class="p">));</span> <span class="kd">const</span><span class="w"> </span><span class="nx">Settings</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">lazy</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="k">import</span><span class="p">(</span><span class="s1">'./pages/Settings'</span><span class="p">));</span> <span class="kd">function</span><span class="w"> </span><span class="nx">PageLoader</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"flex items-center justify-center h-screen"</span><span class="o">&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"animate-spin h-8 w-8 border-b-2 border-blue-600 rounded-full"</span><span class="w"> </span><span class="o">/&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="err">/div&gt;</span> <span class="w"> </span><span class="p">);</span> <span class="p">}</span> <span class="kd">function</span><span class="w"> </span><span class="nx">App</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">BrowserRouter</span><span class="o">&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">Suspense</span><span class="w"> </span><span class="nx">fallback</span><span class="o">=</span><span class="p">{</span><span class="o">&lt;</span><span class="nx">PageLoader</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">}</span><span class="o">&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">Routes</span><span class="o">&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">Route</span><span class="w"> </span><span class="nx">path</span><span class="o">=</span><span class="s2">"/"</span><span class="w"> </span><span class="nx">element</span><span class="o">=</span><span class="p">{</span><span class="o">&lt;</span><span class="nx">Dashboard</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">Route</span><span class="w"> </span><span class="nx">path</span><span class="o">=</span><span class="s2">"/traces/:id"</span><span class="w"> </span><span class="nx">element</span><span class="o">=</span><span class="p">{</span><span class="o">&lt;</span><span class="nx">TraceDetail</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">Route</span><span class="w"> </span><span class="nx">path</span><span class="o">=</span><span class="s2">"/settings"</span><span class="w"> </span><span class="nx">element</span><span class="o">=</span><span class="p">{</span><span class="o">&lt;</span><span class="nx">Settings</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="err">/Routes&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="err">/Suspense&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="err">/BrowserRouter&gt;</span> <span class="w"> </span><span class="p">);</span> <span class="p">}</span> <span class="c1">// Preload on hover to reduce perceived latency:</span> <span class="kd">const</span><span class="w"> </span><span class="nx">preloadDetail</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="k">import</span><span class="p">(</span><span class="s1">'./pages/TraceDetail'</span><span class="p">);</span> <span class="kd">function</span><span class="w"> </span><span class="nx">TraceCard</span><span class="p">({</span><span class="w"> </span><span class="nx">id</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">a</span><span class="w"> </span><span class="nx">href</span><span class="o">=</span><span class="p">{</span><span class="sb">`/traces/</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">}</span><span class="w"> </span><span class="nx">onMouseEnter</span><span class="o">=</span><span class="p">{</span><span class="nx">preloadDetail</span><span class="p">}</span><span class="o">&gt;</span> <span class="w"> </span><span class="nx">View</span><span class="w"> </span><span class="nx">Trace</span> <span class="w"> </span><span class="o">&lt;</span><span class="err">/a&gt;</span> <span class="w"> </span><span class="p">);</span> <span class="p">}</span> </code></pre></div> <p>Key points: - React.lazy works only with default exports - Suspense fallback shows while the chunk is loading - Route-level splitting has the highest ROI -- different pages rarely needed together - Preload on hover reduces perceived latency for likely navigation - Vite/webpack split at import() boundaries automatically</p>