코드 분할은 하나의 큰 JavaScript 번들을 초기 화면과 이후 경로에 필요한 조각으로 나눕니다. 첫 진입에서 받는 코드를 줄일 수 있지만 추가 요청과 로딩 상태도 설계해야 합니다.
데모의 왼쪽은 전체 번들을 한 번에 받고, 오른쪽은 홈 조각을 먼저 받습니다. 사용자가 다음 경로로 이동하면 나머지 조각이 추가됩니다.
언제 쓰나
초기 JavaScript 전송·파싱이 큰 앱에서 경로 또는 기능 단위로 나눕니다.
코드 분할 성능
Code splitting performance
화면에 필요한 코드만 먼저 받고 나머지는 경로별로 나눠 받습니다.
···
<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>.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)}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)