Code Splitting이란?
앱 코드 전체를 한 번에 보내지 않고 필요한 부분만 나눠 로드하는 최적화다.
방식
- 라우트 기반 — 페이지별 분할 (Next.js 기본)
- 컴포넌트 기반 —
React.lazy()+ Suspense - 동적 import —
import('./heavy').then(...)
효과
초기 JS 번들이 1MB → 100KB로 줄어들면 FCP·TTI가 극적으로 개선. Core Web Vitals의 LCP 점수에 직결.
Code Splitting란?
정의
하나의 거대 번들을 여러 청크로 쪼개 필요할 때만 로드하는 기법. 초기 로딩 속도 크게 개선.
다른 표현코드 스플리팅코드 분할
📘 관련 기술노트
전체 보기 →🔗 함께 보면 좋은 용어
Frontend 전체 →a11y
Accessibility
웹 접근성. 장애인·모든 사용자가 쓸 수 있게 하는 실천. WCAG 표준.
Angular
Google의 엔터프라이즈 프런트엔드 프레임워크. TypeScript 1급. RxJS·DI 기반.
ARIA
Accessible Rich Internet Applications
HTML 네이티브로 표현 어려운 의미를 속성으로 보강하는 W3C 표준.
aspect-ratio
요소의 가로/세로 비율을 CSS로 직접 지정하는 속성. 이미지·영상 로드 전 공간 예약.
Astro
콘텐츠 중심 사이트에 최적화된 프레임워크. "Islands Architecture"로 기본 0 JS, 필요한 곳만 hydration.
axios
Node·브라우저용 HTTP 클라이언트. fetch 이전 표준. 인터셉터·변환 기능 풍부.