Code Splitting

Divide application code into smaller bundles.

html

<div class="csp csp--chunks" role="img" aria-label="chunks bundling of 360KB">
  <p class="csp__title">360KB total &mdash; chunks</p>
  <div class="csp__bar csp__bar--single" style="background:#A8E6C1;">app.bundle.js &middot; 360KB &middot; loaded before first paint</div>
  <div class="csp__chunks">
    <span class="csp__chunk" style="flex:5;background:#A8E6C1;">main</span>
    <span class="csp__chunk" style="flex:3;background:#24143030;">/dashboard</span>
    <span class="csp__chunk" style="flex:2;background:#24143018;">/settings</span>
  </div>
  <p class="csp__note csp__note--single">Everything downloads up front, whether the visitor needs it or not.</p>
  <p class="csp__note csp__note--chunks">Only <strong>main</strong> loads first; route chunks load when that route is visited.</p>
</div>
<style>
.csp { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 320px; box-sizing: border-box; }
.csp__title { margin: 0 0 12px; font-weight: 700; }
.csp__bar { display: none; padding: 14px 10px; border-radius: 8px; color: #241430; font-size: 10px; font-weight: 600; }
.csp__chunks { display: none; gap: 4px; height: 30px; }
.csp__chunk { display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #241430; font-size: 9px; font-weight: 700; overflow: hidden; }
.csp--single .csp__bar { display: block; }
.csp--chunks .csp__chunks { display: flex; }
.csp__note { display: none; margin: 10px 0 0; font-size: 10px; color: #24143099; }
.csp--single .csp__note--single, .csp--chunks .csp__note--chunks { display: block; }
</style>

tailwind

<div class="csptw csptw--chunks font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[320px] box-border" role="img" aria-label="chunks bundling of 360KB">
  <p class="m-0 mb-3 font-bold">360KB total &mdash; chunks</p>
  <div class="csptw__bar hidden py-3.5 px-2.5 rounded-lg text-[10px] font-semibold" style="background:#A8E6C1;">app.bundle.js &middot; 360KB &middot; loaded before first paint</div>
  <div class="csptw__chunks hidden gap-1 h-[30px]">
    <span class="flex items-center justify-center rounded-md text-[9px] font-bold overflow-hidden" style="flex:5;background:#A8E6C1;">main</span>
    <span class="flex items-center justify-center rounded-md text-[9px] font-bold overflow-hidden" style="flex:3;background:#24143030;">/dashboard</span>
    <span class="flex items-center justify-center rounded-md text-[9px] font-bold overflow-hidden" style="flex:2;background:#24143018;">/settings</span>
  </div>
  <p class="csptw__note-single hidden mt-2.5 m-0 text-[10px] text-[#24143099]">Everything downloads up front, whether the visitor needs it or not.</p>
  <p class="csptw__note-chunks hidden mt-2.5 m-0 text-[10px] text-[#24143099]">Only <strong>main</strong> loads first; route chunks load when that route is visited.</p>
</div>
<style>
.csptw--single .csptw__bar, .csptw--single .csptw__note-single { display: block; }
.csptw--chunks .csptw__chunks { display: flex; }
.csptw--chunks .csptw__note-chunks { display: block; }
</style>

react

export function CodeSplitting({
  totalSize = 360,
  splitMode = "chunks",
  accent = "#A8E6C1",
  showLabels = true,
}) {
  return (
    <div role="img" aria-label={`${splitMode} bundling of ${totalSize}KB`} style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 320, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontWeight: 700 }}>{totalSize}KB total &mdash; {splitMode}</p>
      {splitMode === "single"
        ? <div style={{ padding: "14px 10px", borderRadius: 8, background: accent, fontSize: 10, fontWeight: 600 }}>{showLabels && `app.bundle.js \u00B7 ${totalSize}KB \u00B7 loaded before first paint`}</div>
        : (
          <div style={{ display: "flex", gap: 4, height: 30 }}>
            <span style={{ flex: 5, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 6, fontSize: 9, fontWeight: 700, overflow: "hidden", background: accent }}>{showLabels && "main"}</span>
            <span style={{ flex: 3, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 6, fontSize: 9, fontWeight: 700, overflow: "hidden", background: "#24143030" }}>{showLabels && "/dashboard"}</span>
            <span style={{ flex: 2, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 6, fontSize: 9, fontWeight: 700, overflow: "hidden", background: "#24143018" }}>{showLabels && "/settings"}</span>
          </div>
        )}
      <p style={{ margin: "10px 0 0", fontSize: 10, color: "#24143099" }}>
        {splitMode === "single" ? "Everything downloads up front, whether the visitor needs it or not." : <>Only <strong>main</strong> loads first; route chunks load when that route is visited.</>}
      </p>
    </div>
  );
}