Nextjs Code Spliting
웹 애플리케이션에서 필요한 자바스크립트 코드를 더 작은 청크(chunk)로 분할하는 기술
- 초기 페이지 로딩 속도를 개선하고, 필요한 자원만 불러와서 효율적으로 페이지를 로드
- Next.js에서는 자동으로 코드 스플리팅이 적용되어, 각 페이지의 자바스크립트 코드를 해당 페이지에 필요한 최소한의 크기로 분할
- 사용자가 실제로 방문하지 않는 페이지의 자원을 미리 로드하지 않기 때문에 초기 로딩 속도가 개선됨
1. 페이지별 코드 스플리팅
- 각 페이지는 자동으로 해당 페이지에 필요한 자바스크립트 코드만 분할되어 로드됨
- 사용자가 특정 페이지에 접근할 때, 해당 페이지에 필요한 코드 청크만 다운로드되고 실행됩니다.
2. 공통 모듈 분리
- 공통으로 사용되는 모듈은 별도의 공통 청크로 분리
- 여러 페이지에서 사용되는 공통 모듈을 한 번만 로드하여 자원을 절약
3. 라우트 기반 코드 스플리팅
- 사용자가 특정 라우트로 이동할 때 해당 라우트에 필요한 코드만 동적으로 로드하여 사용자 경험을 개선