[Webpack] code splitting

일반적으로 Webpack은 번들링을 이용해서 모든 코드를 하나의 번들로 묶어서 만드는 역할을 한다.

 

앱이 비교적 간단한 편이면 1개의 번들에 모아도 크게 문제가 되지 않지만,

 

프로젝트가 커지면 전달해야하는 파일도 커지고, 유저의 브라우저가 파싱해야하는 정보도 많아지기 때문에 성능상 문제들이 생길 수 밖에 없다.

 

code splitting은 말그대로 사용자가 현재 필요로하는 것들만 lazy-load할 수 있게하여 앱의 성능을 크게 향상 시킬 수 있다.

앱의 전체 코드양을 줄이지는 않지만, 사용자가 필요로 하지 않는 코드를 로드하는 것을 피하고, 초기 페이지 로드시에 필요한 코드만 받게한다.

 

즉, 유저가 당장 필요한 정보에 우선 순위를 두어서 순서대로 로딩하는 것이다.

(앱에서 아직 정보를 로딩중이더라도, 유저한테 티가 안나면 어느정도 좋은 UX를 전달가능하기 때문이다.)

 

ref

velog.io/@ansrjsdn/코드-스플리팅

medium.com/humanscape-tech/react에서-해보는-코드-스플리팅-code-splitting-56c9c7a1baa4