[Next.js Learn] How Next.js Works(6) - Code Splitting

0

Next.js Learn

목록 보기
20/50

코드 스플리팅이 뭔가요?(What is Code Splitting?)

개발자들은 일반적으로 애플리케이션을 여러 페이지로 분할하여 각 페이지를 서로 다른 URL에서 접근할 수 있도록 합니다. 각각의 페이지는 애플리케이션으로의 고유한 진입점이 됩니다.

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

Next.js는 코드 분할을 내장 지원합니다. pages/ 디렉토리 내의 각 파일은 빌드 단계에서 자체적인 JavaScript 번들로 자동 분할됩니다.

추가사항:

  • 페이지 간에 공유되는 모든 코드도 동일한 코드를 추가로 다운로드하지 않기 위해 다른 번들로 분할됩니다.
  • 초기 페이지 로드 후, Next.js는 사용자가 탐색할 가능성이 있는 다른 페이지의 코드를 사전로드할 수 있습니다.
  • 동적 임포트는 초기로드되는 코드를 수동으로 분할하는 또 다른 방법입니다.

출처: https://nextjs.org/learn/foundations/how-nextjs-works/code-splitting

profile
지치지 않는 백엔드 개발자 김성주입니다 :)

0개의 댓글