ReactJS Code Splitting

Last modified on: September 7, 2025

<h1 data-start="396" data-end="426"><strong data-start="398" data-end="424">ReactJS Code Splitting</strong></h1>
<p data-start="428" data-end="646">Code splitting is a powerful optimization technique in ReactJS that <strong data-start="496" data-end="519">reduces bundle size</strong> by loading only the required JavaScript for a specific page or component, instead of loading the entire application at once.</p>
<hr data-start="648" data-end="651" />
<h2 data-start="653" data-end="684">🚀 <strong data-start="659" data-end="682">Why Code Splitting?</strong></h2>
<ul data-start="685" data-end="904">
<li data-start="685" data-end="760">
<p data-start="687" data-end="760">Large apps load <strong data-start="703" data-end="713">slower</strong> if everything is bundled into a single file.</p>
</li>
<li data-start="761" data-end="834">
<p data-start="763" data-end="834">Improves <strong data-start="772" data-end="793">initial load time</strong> by splitting code into smaller chunks.</p>
</li>
<li data-start="835" data-end="904">
<p data-start="837" data-end="904">Enhances <strong data-start="846" data-end="865">user experience</strong> by loading components <strong data-start="888" data-end="901">on demand</strong>.</p>
</li>
</ul>
<hr data-start="906" data-end="909" />
<h2 data-start="911" data-end="937"><strong data-start="914" data-end="935">1. Dynamic Import</strong></h2>
<p data-start="938" data-end="1005">Instead of importing everything upfront, use <strong data-start="983" data-end="1002">dynamic imports</strong>.</p>
<p data-start="1007" data-end="1019">✅ Example:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>// Normal import
import Dashboard from './Dashboard';

// Dynamic import
const Dashboard = React.lazy(() =&gt; import('./Dashboard'));
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1164" data-end="1167" />
<h2 data-start="1169" data-end="1204"><strong data-start="1172" data-end="1202">2. React.lazy and Suspense</strong></h2>
<p data-start="1206" data-end="1292">React provides <strong data-start="1221" data-end="1237"><code data-start="1223" data-end="1235">React.lazy</code></strong> for lazy loading and <strong data-start="1259" data-end="1273"><code data-start="1261" data-end="1271">Suspense</code></strong> for fallback UI.</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { Suspense } from "react";

const Profile = React.lazy(() =&gt; import("./Profile"));

function App() {
  return (
    &lt;div&gt;
      &lt;h1&gt;Code Splitting Example&lt;/h1&gt;
      &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
        &lt;Profile /&gt;
      &lt;/Suspense&gt;
    &lt;/div&gt;
  );
}

export default App;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1607" data-end="1685">✅ <code data-start="1609" data-end="1618">Profile</code> component will load <strong data-start="1639" data-end="1659">only when needed</strong>, improving performance.</p>
<hr data-start="1687" data-end="1690" />
<h2 data-start="1692" data-end="1730"><strong data-start="1695" data-end="1728">3. Route-Based Code Splitting</strong></h2>
<p data-start="1732" data-end="1808">When using <strong data-start="1743" data-end="1759">React Router</strong>, load components only when a route is visited.</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

const Home = lazy(() =&gt; import("./Home"));
const About = lazy(() =&gt; import("./About"));

export default App;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2322" data-end="2370">✅ Loads <strong data-start="2330" data-end="2367">only the required route component</strong>.</p>
<hr data-start="2372" data-end="2375" />
<h2 data-start="2377" data-end="2413"><strong data-start="2380" data-end="2411">4. Webpack &amp; Code Splitting</strong></h2>
<p data-start="2415" data-end="2504">React (via Webpack) automatically creates chunks for lazy-loaded components.<br data-start="2491" data-end="2494" />Example:</p>
<ul data-start="2505" data-end="2600">
<li data-start="2505" data-end="2537">
<p data-start="2507" data-end="2537"><code data-start="2507" data-end="2516">main.js</code> &rarr; Core app bundle.</p>
</li>
<li data-start="2538" data-end="2600">
<p data-start="2540" data-end="2600"><code data-start="2540" data-end="2558">Profile.chunk.js</code> &rarr; Loaded only when Profile is required.</p>
</li>
</ul>
<hr data-start="2602" data-end="2605" />
<h2 data-start="2607" data-end="2645">📊 <strong data-start="2613" data-end="2643">Benefits of Code Splitting</strong></h2>
<div class="_tableContainer_1rjym_1">
<div class="_tableWrapper_1rjym_13 group flex w-fit flex-col-reverse" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="2647" data-end="2932">
<thead data-start="2647" data-end="2685">
<tr data-start="2647" data-end="2685">
<th data-start="2647" data-end="2670" data-col-size="sm">Benefit</th>
<th data-start="2670" data-end="2685" data-col-size="sm">Explanation</th>
</tr>
</thead>
<tbody data-start="2725" data-end="2932">
<tr data-start="2725" data-end="2782">
<td data-start="2725" data-end="2747" data-col-size="sm">Faster Initial Load</td>
<td data-start="2747" data-end="2782" data-col-size="sm">Only essential code loads first</td>
</tr>
<tr data-start="2783" data-end="2839">
<td data-start="2783" data-end="2805" data-col-size="sm">Reduced Bundle Size</td>
<td data-start="2805" data-end="2839" data-col-size="sm">Splits app into smaller chunks</td>
</tr>
<tr data-start="2840" data-end="2889">
<td data-start="2840" data-end="2852" data-col-size="sm">Better UX</td>
<td data-start="2852" data-end="2889" data-col-size="sm">Lazy load non-critical components</td>
</tr>
<tr data-start="2890" data-end="2932">
<td data-start="2890" data-end="2901" data-col-size="sm">Scalable</td>
<td data-start="2901" data-end="2932" data-col-size="sm">Supports large applications</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="2934" data-end="2937" />
<p data-start="2939" data-end="3170">✅ <strong data-start="2941" data-end="2953">Summary:</strong><br data-start="2953" data-end="2956" />ReactJS Code Splitting improves performance by <strong data-start="3003" data-end="3029">loading code on demand</strong>. Use <strong data-start="3035" data-end="3060">React.lazy + Suspense</strong> for lazy loading and <strong data-start="3082" data-end="3107">route-based splitting</strong> for large apps. Combine with Webpack for maximum efficiency.</p>

Web Technology View More