TanStack Router 공식문서 정리 #2 : Code Splitting

📌Code Splitting

Code splitting과 lazy loading번들 사이즈와 로드 성능을 향상시킨다.

• 초기 페이지 로드 시 로드해야 하는 코드의 양을 줄인다.
• 코드는 필요할 때 로드된다 (on-demand 방식)
• 코드를 더 작은 단위의 청크로 나누어 저장하기 때문에 브라우저가 더 쉽게 캐시할 수 있다.

코드 분할 방법

1. Critical Route Configuration (중요 라우터 구성)

현재 라우트를 렌더링하고 가능한 빨리 데이터 로딩 프로세스를 시작하는 데 필요한 코드

💡 Critical Route Configuration 예시

• 경로 파싱/직렬화(Path Parsing/Serialization)
• 검색 매개변수 검증(Search Param Validation)
• 로더(Loaders), 로드 전(Before Load)
• 라우트 컨텍스트(Route Context)
• 정적 데이터(Static Data)
• 링크(Links)
• 스크립트(Scripts)
• 스타일(Styles)

 

2. Non-Critical/Lazy Route Configuration (비중요 / 지연 라우터 구성)

필요할 때 로드할 수 있는 코드 

💡 Non-Critical/Lazy Route Configuration 예시

• 라우트 컴포넌트(Route Component)
• 오류 컴포넌트(Error Component)
• 대기 중인 컴포넌트(Pending Component)
• 찾을 수 없는 컴포넌트(Not-found Component)

❓ 로더가 분할되지 않는 이유
로더는 이미 비동기적으로 동작하기 때문에 로더 코드를 분할한다면, 로더를 가져오고 나서 로더가 실행하기까지 기다려야 하므로, 시간이 두 번 소요되어 비효율적이다.
또, 로더는 다른 컴포넌트들에 비해 코드 양이 적어 전체 번들 크기를 많이 차지하지 않는다.
마지막으로 로더는 사용자가 페이지를 클릭하기 전에 데이터를 준비하므로(pre-load) 즉시 사용 가능해야 한다.

Route 파일을 디렉토리로 캡슐화 하기

🅱️ Before

posts.lazy.tsx

🅰️ After

• posts

route.lazy.tsx

파일을 디렉토리로 캡슐화하려면, 파일을 동일한 이름의 디렉토리 내 .route파일로 이동하면 된다. 즉, 디렉토리 구조가 path가 되는 것이다.

.lazy.tsx

createLazyFileRoute 를 사용하면 코드분할이 간단해진다. 해당 함수에서 현재 지원하는 옵션은 다음과 같다

Export NameDescription

component	해당 경로에서 렌더링할 컴포넌트
errorComponent	해당 경로를 로드하는 동안 오류가 발생할 경우 렌더링할 컴포넌트
pendingComponent	해당 경로가 로드되는 동안 렌더링할 컴포넌트
notFoundComponent	해당 경로가 존재하지 않을 경우 렌더링할 컴포넌트

💡 __root.tsx 는 현재 경로와 관계없이 항상 렌더링되므로 코드분할을 지원하지 않는다.