[자바스크립트] webpack으로 코드스플리팅 적용하기

모달

 

내배캠 두번째 프로젝트에 모달(Modal)을 만들어 각 이미지 카드 클릭 시 세부 정보를 보여주는 기능을 만들었다. 사실 실제로 보여주는 정보는 별거 없으나 모달을 만들어보고 코드 스플리팅(Code Splitting)을 연습해 볼 수 있었다.

 

웹팩(Webpack)을 사용해 번들링(Bundling)하는 경우 코드 스플리팅을 매우 쉽게 할 수 있다. 공홈에서는 여러 방법을 제시하고 있는데 오늘은 Dynamic import 방식을 적용했다.

---

Dynamic Import

 

// modal.js
const InfoModal = (movie, $body) => {
  //...
  //...
  //...

  return $wrapper;
};

export default InfoModal;

 

우선, 모달 코드를 작성해 ES6 방식으로 export 하였다.

 

// index.js
$image.addEventListener('click', async (e) => {
  const InfoModal = await import('./modal');
  const modal = InfoModal.default(e.target.dataset, $body);

  $body.appendChild(modal);
  $body.style.overflow = 'hidden';
});

 

그리고 해당 코드를 import하는 코드에서 import를 상단에 하는 것이 아니라 사용하는 지점에서 하면 된다. 아주 간단하지만 아래의 사항을 주의해야 한다.

• CommonJS 방식이 아니라 ES6 방식으로 import, export 한다.
• import()는 프로미스를 리턴하기 때문에 비동기 처리가 필요하다.
• export default로 가져온 모듈은 리턴된 프로미스의 defatult에 들어있다.

 

코드 스플리팅 전후

 

위 사진을 보면 코드 스플리팅 이전에는 하나의 번들 파일만 생성되는데 스플리팅 이후에는 분리한 모달 파일이 별도로 생성되는 것을 확인할 수 있다. 스플리팅된 develop_modal.js.index.js는 프로젝트에서 모달을 실행시키는 시점에서 브라우저로 가져오는 파일이다.

 

네트워크 탭

 

네트워크 탭을 확인하면 index.js는 초기에 html 파일에 의해 가져온 것으로 되어 있으나, develop_modal.js.index.js는 모달이 처음 사용되는 시점에 index.js에 의해 가져온 것을 확인할 수 있다.

 

---

 

Code Splitting | webpack