Next.js: 코드 스플리팅(Code Splitting)

 

TTV(Time to View) : 사용자가 콘텐츠를 볼 수 있는데까지 걸리는 시간.

TTI(Time to Interaction) : 사용자가 콘텐츠를 사용할 수 있는데까지 걸리는 시간.

 

코드 스플리팅(Code Splitting)

Next.js에서는 컴포넌트를 동적으로 import하여 사용할 수 있습니다.

Next.js의 번들러에서 번들 시 이러한 컴포넌트는 코드가 자동으로 나누어져 번들링 됩니다.

그 결과 실행되지 않아도 불러와졌던 컨텐츠는 런타임시 필요한 모듈만 불러올 수 있게 됩니다.

따라서 로딩 시간이 짧아지므로 TTV가 향상됩니다.

 

그러나 런타임시 필요한 모듈을 불러오는 형식이므로, 모듈의 크기가 클 경우에는 오랫동안 빈 화면만 나타낼 수도 있습니다.

 

 

Code Splitting