Code splitting performance

코드 분할 성능

Code splitting downloads the code needed now and loads other route chunks later.

···
html
<div class="atlas"><div class="head"><b>CODE SPLITTING · initial load</b><span class="pulse"></span></div><div class="stage"><div class="cs-cols"><div class="cs-col box"><b>single bundle</b><div class="cs-stack"><i class="cs-all"></i></div><small>all routes now</small></div><div class="cs-col box"><b>split routes</b><div class="cs-stack"><i class="cs-home"></i><i class="cs-route" id="cs-route"></i></div><small id="cs-label">home now</small></div></div></div></div>
css
.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.cs-cols{display:flex;gap:8px;height:100%}.cs-col{flex:1;min-width:0;padding:8px;display:flex;flex-direction:column;justify-content:space-between;text-align:center}.cs-col b,.cs-col small{font-size:12px}.cs-col b{color:var(--muted)}.cs-stack{height:50%;display:flex;align-items:center;justify-content:center;gap:3px}.cs-stack i{display:block;height:38px;border-radius:5px}.cs-all{width:88%;background:var(--accent-2)}.cs-home{width:35%;background:var(--accent)}.cs-route{width:0;background:var(--accent-2);transition:width .6s}.cs-route.on{width:45%}.cs-col small{color:var(--accent)}
js
let route=false;function tick(){route=!route;document.getElementById('cs-route').classList.toggle('on',route);document.getElementById('cs-label').textContent=route?'route chunk on visit':'home chunk first'}tick();setInterval(tick,2200)

Code splitting divides a large JavaScript bundle into an initial chunk and chunks for later routes. It can reduce initial transfer, while adding later requests and loading states.

The demo contrasts downloading everything up front with downloading the home chunk first, then adding a route chunk after navigation.

When to use

Use it when initial JavaScript transfer or parsing is large, splitting by route or feature.

Open as page ↗