Webpack은 자바스크립트 모듈 번들러로, 여러 모듈을 하나의 번들 파일로 묶어줍니다. 이번에는 Webpack을 사용하여 다이나믹 모듈 로딩을 구현하는 방법을 알아보겠습니다.

다이나믹 모듈 로딩이란?

다이나믹 모듈 로딩은 애플리케이션 실행 중에 모듈을 필요한 시점에 로딩하는 방법입니다. 이를 통해 초기 로딩 시간을 줄이고 필요한 모듈만 로딩하여 성능을 최적화할 수 있습니다.

예제 코드

// main.js

function loadModule(moduleName) {
  return import(`./modules/${moduleName}.js`)
    .then(module => {
      module.init();
    })
    .catch(error => {
      console.log(`Failed to load module: ${moduleName}`);
    });
}

function handleClick(event) {
  const moduleName = event.target.dataset.module;
  loadModule(moduleName);
}

document.querySelectorAll('.module-button').forEach(button => {
  button.addEventListener('click', handleClick);
});

<!-- index.html -->

<button class="module-button" data-module="module1">Load Module 1</button>
<button class="module-button" data-module="module2">Load Module 2</button>

코드 설명

위의 예제 코드에서 main.js는 메인 애플리케이션 로직을 담고 있는 파일입니다. loadModule 함수는 동적으로 모듈을 로딩하는 역할을 수행합니다. import() 문법을 사용하여 모듈을 로딩하고, then 메서드로 모듈 초기화 함수를 호출합니다.

handleClick 함수는 모듈을 로딩하기 위해 버튼 클릭 이벤트를 처리하는 역할을 수행합니다. 클릭된 버튼의 data-module 속성을 가져와 해당 모듈을 로딩하는 loadModule 함수를 호출합니다.

index.html 파일은 모듈을 로딩하기 위한 버튼을 포함하고 있습니다. 각 버튼은 data-module 속성을 가지고 있으며, 클릭 시 handleClick 함수가 실행됩니다.

실행 방법

위의 코드를 실행하려면 먼저 Webpack을 설치해야 합니다. 터미널에서 아래 명령어를 실행하여 필요한 패키지를 설치합니다.

npm install webpack webpack-cli --save-dev

그리고 main.js와 index.html 파일을 작성한 뒤, 터미널에서 아래 명령어를 실행하여 번들 파일을 생성합니다.

npx webpack --mode production

위의 명령어를 실행하면 dist/main.js 파일이 생성됩니다. 이 파일을 브라우저에서 로드하면 다이나믹 모듈 로딩이 동작하는 웹 애플리케이션을 확인할 수 있습니다.

결론

Webpack을 사용하여 다이나믹 모듈 로딩을 구현하는 방법에 대해 알아보았습니다. 이를 활용하면 애플리케이션의 성능을 최적화하고 필요한 모듈만 로딩하여 초기 로딩 시간을 줄일 수 있습니다.