Webpack & Vite에서 ESModule과 Dynamic import 실전 적용

이번 강좌에서는 현대 프론트엔드 개발의 핵심인 모듈 번들러인 Webpack과 Vite에서 ESModule을 활용하고 Dynamic import를 적용하는 방법을 실습해봅니다.

📌 ESModule과 번들러의 관계

• Webpack : import/export 문법을 지원하며, 번들 시 모듈을 하나로 묶음
• Vite : ESModule을 네이티브로 지원하여 빠른 개발 서버와 Dynamic import에 최적화

✅ Webpack에서 Dynamic import 적용 예제

1️⃣ 프로젝트 초기화 & Webpack 설치

npm init -y
npm install --save-dev webpack webpack-cli

2️⃣ 모듈 파일 작성

utils.js

export function greet() {
  alert('Hello, Webpack!');
}

3️⃣ main.js에서 Dynamic import

document.getElementById('btn').addEventListener('click', () => {
  import('./utils.js').then(module => {
    module.greet();
  });
});

4️⃣ Webpack 설정 파일

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
};

5️⃣ 빌드

npx webpack

👉 번들링된 bundle.js 파일을 dist 폴더에서 확인 가능하며, 버튼 클릭 시 utils.js가 비동기로 로드됩니다.

✅ Vite에서 Dynamic import 적용 예제

1️⃣ 프로젝트 초기화 & Vite 설치

npm create vite@latest
cd 프로젝트명
npm install

2️⃣ 모듈 파일 작성

utils.js

export function greet() {
  alert('Hello, Vite!');
}

3️⃣ main.js에서 Dynamic import

document.getElementById('btn').addEventListener('click', () => {
  import('./utils.js').then(module => {
    module.greet();
  });
});

4️⃣ 개발 서버 실행

npm run dev

👉 Vite는 ESModule을 네이티브로 처리해 Dynamic import 시 별도의 설정 없이 바로 작동합니다.

📌 Dynamic import의 번들링 결과

• Webpack : bundle.js 외에 0.bundle.js 같은 추가 청크 파일로 분리
• Vite : Dynamic import된 모듈을 자동으로 별도의 chunk 파일로 분리하여 네트워크 효율 최적화

✅ 정리

• Webpack : ESModule 지원 + Dynamic import 시 청크 파일 생성
• Vite : ESModule 네이티브 지원 + 번개 같은 개발 서버 + 자동 청크 분리
• 둘 다 초기 로딩 속도 최적화와 코드 스플리팅에 필수!

실제 실무에서도 SPA 프로젝트나 대형 서비스에서 Dynamic import로 특정 페이지, 컴포넌트, 유틸리티 함수만 필요 시 로드하는 방식으로 활용하면 초기 로딩 속도와 성능 개선에 큰 효과를 볼 수 있어요! 🚀