더북(TheBook)

17.3.2 라우트 코드 스플리팅용 인덱스 생성

 

앞서 pages/index.js 파일에 라우트 컴포넌트를 불러와 내보내는 index 파일을 만들었습니다. 이제 라우트 관련 컴포넌트들을 비동기적으로 불러오는 인덱스 파일인 pages/index.async.js 파일을 만들어 보겠습니다.

이렇게 index.js와 index.async.js 파일을 분리하는 이유는 나중에 개발 서버에서 비동기 라우트를 비활성화할 것이기 때문입니다. 개발 서버에서 청크를 생성하여 코드 스플리팅을 하면 코드 내용을 변경했을 때 자동으로 새로고침하지 않기 때문에, 라우트 코드 스플리팅은 실제로 나중에 사용자에게 전달할 프로덕션 빌드에만 적용할 수 있습니다(지금은 우선 잘 작동하는지 확인하려고 개발 서버에 적용해 보겠습니다).

index.async.js 파일에서 방금 만들었던 asyncComponent 함수를 불러와 다음과 같이 코드를 입력하세요.

src/pages/index.async.js

import asyncComponent from ‘lib/asyncComponent’;
 
export const Home = asyncComponent(() => import(‘./Home’));
export const About = asyncComponent(() => import(‘./About’));
export const Post = asyncComponent(() => import(‘./Post’));
export const Posts = asyncComponent(() => import(‘./Posts’));

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.