Code Splitting

Zense·2023년 7월 10일
0
post-custom-banner

Code Splitting이란?

개발자는 일반적으로 애플리케이션을 서로 다른 URL에서 액세스할 수 있는 여러 페이지로 분할합니다. 이러한 각 페이지는 애플리케이션에 대한 고유한 진입점(entry point)이 됩니다.

Code Splitting은 애플리케이션의 번들을 각 진입점에 필요한 더 작은 덩어리(chunk)로 분할하는 과정입니다. 이 과정의 목표는 해당 페이지를 실행하는 데 필요한 코드만 로드하여 애플리케이션의 초기 로드 시간을 개선하는 것입니다.

Next.js에는 코드 분할 기능이 내장되어 있습니다. pages/ 디렉토리 내의 각 파일은 빌드 단계에서 자체 JavaScript 번들로 자동으로 코드 분할됩니다.

또한,

  • 페이지 간에 공유되는 모든 코드는 이후 탐색에서 동일한 코드를 다시 다운로드하지 않도록 다른 번들로 분할됩니다.
  • 초기 페이지 로드 후 Next.js는 사용자가 탐색할 가능성이 있는 다른 페이지의 코드를 미리 로드할 수 있습니다.
  • Dynamic import는 처음에 로드된 코드를 수동으로 분할하는 또 다른 방법입니다.

원문 - https://nextjs.org/learn/foundations/how-nextjs-works/code-splitting

post-custom-banner

0개의 댓글