[공식문서] Next.js의 작동 방식 #6

코드 분할이란?

 

개발자들은 보통 애플리케이션을 여러 페이지로 나누어 다른 URL에서 접근할 수 있도록 합니다. 각각의 이 페이지는 애플리케이션으로의 고유한 진입점(entry point)이 됩니다.

코드 분할은 애플리케이션의 번들을 각 진입점에서 필요한 작은 청크로 분할하는 프로세스입니다. 그 목표는 해당 페이지를 실행하는 데 필요한 코드만 로드하여 애플리케이션의 초기 로드 시간을 개선하는 것입니다.

 

Next.js 공식문서 - 코드 분할 예시

Next.js에는 코드 분할을 내장한 지원이 있습니다. pages/ 디렉터리 내의 각 파일은 빌드 단계에서 자체 JavaScript 번들로 자동으로 분할됩니다.

더 나아가서:

• 페이지 간에 공유되는 모든 코드도 다른 번들로 분할되어 동일한 코드를 다시 내려받는 것을 피합니다.
• 초기 페이지 로드 후에 Next.js는 사용자가 더 탐색할 가능성이 있는 다른 페이지의 코드를 사전에 로드를 시작할 수 있습니다.
• Dynamic imports는 초기로드되는 코드를 수동으로 분할하는 또 다른 방법입니다.