인프런 커뮤니티 질문&답변

안녕하세요, juuu o 님,

코드 분할(Code Splitting)에 대해서 질문을 주셨는데요.

코드 분할을 하지 않고 하나의 번들로 사용을 할 때는 처음 로딩부터, 당장은 필요하지 않은 모달 코드를 포함해서, 모든 코드를 불러오게 됩니다.
하지만, 코드 분할을 하게 되면, 처음에는 당장 필요 없는 모달 코드를 제외한, 당장 필요한 코드 먼저 로드하게 되기 때문에 더 빠르게 첫 화면을 렌더링 할 수 있게 됩니다.

예를 들어, 사이즈가 1000KB인 하나의 bundle.js로 된 서비스가 있다고 가정할 때,
이 중 200KB가 모달 관련된 코드라면,
코드 분할은 이 번들을 bundle.js (800KB) / modal.js (200KB) 이렇게 만들어 줍니다.

즉, 코드 분할 전에는 최초 화면을 렌더링하기 위해서 1000KB를 전부 로드해야 했지만, 
코드 분할을 통해 800KB의 코드만 로드하면 최초 화면을 렌더링 할 수 있게 되는겁니다.
(당연히 1000KB를 로드하는 것 보다, 800KB를 로드하는게 더욱 빠르게 로드할 수 있겠죠?)

물론, 모달 기능을 사용할 때에는 결국 200KB를 로드할 필요가 있습니다.
이 경우, 모달 코드를 뒤 늦게 로드하게 되는 것이므로 오히려 이 포인트(모달을 띄우는 순간)에서 약간의 딜레이(200KB의 모달 코드를 로드하는 시간)가 생길 수 있습니다. 

preload는 이런 문제를 해결하기 위해서 적용을 할 수 있습니다.
모달 기능을 사용하는 순간에 모달 코드를 로드하는 것이 아니라, 더 이전의 순간(모달 띄우는 버튼에 마우스를 올리는 순간, 또는 첫 페이지가 모두 렌더링 된 후 메인 쓰레드에 여유가 있는 순간)에 모달 코드를 로드함으로써 최대한 분할된 모달 코드의 로드 시간을 단축시킬 수 있습니다.

답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)