지연 로딩의 단점

• 지연 로딩 기법을 사용하면 최초 페이지를 로드할 때 당장은 필요 없는 모달과 관련된 코드가 번들에 포함되지 않아, 로드할 파일의 크기가 작아지고 초기 로딩 속도나 자바스크립트의 실행 타이밍이 빨라져서 화면이 더 빨리 표시된다는 장점이 있음
• 하지만 지연 로딩은 초기 화면 로딩 시에는 효과적일지 몰라도 모달을 띄우는 시점에는 한계가 있음. 모달 코드를 분리했기 때문에 모달을 띄울 때 네트워크를 통해 모달 코드를 새로 로드해야 하며 로드가 완료되어야만 모달을 띄울 수 있기 때문임
• 즉, 모달이 뜨기까지 약간의 지연이 발생할 수 있다는 것임
• 직접 Performance 패널에서 확인해보면 Network throttling을 ‘Fast 3G’로 설정한 후, 페이지가 모두 로드된 상태에서 기록 버튼을 누름. 그 다음 ‘올림픽 사진 보기’ 버튼을 클릭하면 일정 시간 이후 모달이 뜸. 모달이 뜨면 다시 기록 버튼을 눌러서 기록을 마무리함. 그러면 그 시간 동안 이루어진 작업을 보여주는데, 아래와 같이 클릭 시점과 모달이 뜨는 시점이 크게 차이나는 것을 확인할 수 있음

• 이 문제를 해결하기 위해서는 사전 로딩(Preloading) 기법을 이용하면 됨
• 이 기법은 나중에 필요한 모듈을 필요해지기 전에 미리 로드하는 기법임
• 앞의 모달 예시로 예를 들어 보면, 모달 코드가 필요한 시점은 사용자가 버튼을 클릭하는 시점임. 하지만 만약 사용자가 버튼을 클릭하기 전에 미리 모달 코드를 로그해두면 네트워크를 통해 코드를 불러오는 시간과 준비하는 데 드는 시간을 단축할 수 있어 빠르게 모달을 띄울 수 있음

• 위 사진처럼 코드를 미리 로드하고 준비해 두니 클릭 시점과 모달을 띄우는 시점 사이에 거의 딜레이가 없는 것을 알 수 있음
• 하지만 이 방법에는 한 가지 문제가 있음. 사용자가 버튼을 언제 클릭할 지 모르니 모달 코드를 언제 미리 로드해 둘지 정하기 애매하다는 것임
• 여기서 고려할 수 있는 타이밍은 두 가지임. 첫째, 사용자가 버튼 위에 마우스를 올려놨을 때(mouseenter) 둘째, 최초에 페이지가 로드되고 모든 컴포넌트의 마운트가 끝났을 때

컴포넌트 사전 로딩 타이밍

버튼 위에 마우스를 올려놓았을 때 사전 로딩

• 우리가 PC 웹에서 버튼을 클릭하는 과정은 아래와 같음

1. 마우스 커서를 버튼에 올려놓는다.