JS 모듈 번들러

과거에는 웹 애플리케이션이 HTML, CSS, JavaScript 파일 몇 개로 비교적 단순했지만, 웹 애플리케이션이 점점 더 복잡해지고 더 많은 라이브러리와 프레임워크를 통합하기 시작하면서 손수 빌드 프로세스를 진행하는건 불가능에 가까워졌다.

주요 문제 중 하나는 지난 글에서 알아본 모듈과 파일 간의 의존성을 수동으로 관리해야 한다는 것이었는데, 코드를 자동으로 번들링, 최적화하여 사용자에게 애플리케이션을 보다 효율적으로 제공할 수 있는 방법이 필요하게 되었다.

JS 모듈 번들러는 이러한 문제를 해결하기 위해 만들어졌으며, 초기의 번들러는 AMD(Asynchronous Module Definition)를 사용하는 RequireJS나 CommonJS 모듈을 기반으로 하는 Browserify 등이 있었다.

Webpack

Webpack은 Node.js 기반의 JS 모듈 번들러이다.
파일 읽기, 쓰기, 구문 분석, 번들 생성 모두 Node.js의 모듈을 사용해서 수행하며, 이로 인해 Node.js에서 사용할 수 있는 API도 같이 제공한다.

CommonJS, AMD, ES6 등 다양한 형식에 상관없이 다양한 모듈을 지원한다는 장점이 있어 호환성 걱정 없이 사용할 수 있는 가장 표준적인 JS 모듈 번들러로 사용된다.

대표적인 기능으로 코드 분할이 있으며, 코드 분할은 개발자가 모든 코드를 미리 로드하는 대신 필요에 따라 작은 청크로 분할하는 기능이다. 이를 통해 애플리케이션의 초기 로드 지연을 줄이고, 사용자가 다운로드해야 하는 소스의 양을 줄일 수 있다.

Vite

Vite 역시 Node.js를 기반으로 하는 JS 모듈 번들러로, Vite는 CommonJS 또는 AMD 모듈을 처리할 수 있는 원시적인 JS 모듈 번들러가 아닌, 네이티브 ES6 모듈과 동적 임포트를 활용하는 비교적으로 신세대적인 처리 방식을 사용한다.

모든 코드를 단일 파일에 번들링하지 않고, 네이티브 브라우저 ES 모듈(ESM)을 기반으로 하는 모듈 로드 및 번들링을 시행한다.
Vite로 애플리케이션을 빌드하면 각 모듈이 별도의 파일로 변환되어 필요에 따라 브라우저에 제공되며, 이로 인해 빌드 시간을 단축하고 캐싱 효율을 향상해 페이지가 로딩되는 속도 향상시켰다.
또한 Vite는 기본적으로 ES6의 동적 임포트를 활용하므로 최신 JavaScript 기능을 처리하는데 더욱 적합하다고 할 수 있다.
역으로 말하면 CommonJS, AMD와 같은 레거시 모듈에 크게 의존하는 프로젝트라면 적합하지 않고, 이러한 모듈을 ESM으로 변환하는 플러그인을 사용해야 한다.

Vite는 모듈의 번들링과 변환에 Rollup이라는 플러그인을 사용한다. Rollup은 Webpack과 같은 다른 번들러에 비해 더 작고 효율적인 번들을 생성하도록 설계된 JS 모듈 번들러로, 번들링에 네이티브 브라우저 ES 모듈(ESM)을 사용한다는 아이디어를 기반으로 한다.

개발, 빌드에 적합한 번들러

유명한 Vue.js, React와 같은 기술을 사용하는 최신 웹 애플리케이션을 개발 중이라면 Vite가 적합하다고 할 수 있다. Vite는 ESM에 최적화되어 있고, 핫 모듈 스왑을 지원해 개발 중에 자주 발생하는 즉각적인 테스트 환경을 제공하므로 개발 중의 불필요한 지연이 최소화되어 개발 환경이 더 원활해질 수 있다.
또한 Vite에서 지원하는 ESM은 JS의 네이티브 기능이므로 Webpack에서 사용하는 CommonJS 모듈에 비해 로딩 시간이 더 빠르기도 하다.

반면에, 레거시 스크립트나 모듈을 많이 사용하거나 디테일한 커스터마이징 구성이 필요한 복잡한 프로젝트가 있다면 Webpack이 더 나은 선택일 수 있다. Webpack은 수많은 플러그인과 로더로 구성된 방대한 자료를 갖추고 있고, 더 오랜 기간동안 사용된 도구로서 특정 요구 사항을 위한 자료를 참고하기 용이하다.
또한 Webpack에는 코드 분할과 트리 쉐이킹과 같은 최적화 기능이 있어 최종 번들의 크기를 줄이고 성능을 개선하는 데 적합하다.

마무리

당연히 이론적인 내용은 위처럼 상황에 따라 각각 적합한 도구가 다를 수 있다고 할 수 있지만,
개인적인 경험으로 과거에 개발한 대규모 프로젝트의 유지보수 작업에서, Webpack의 테스트 빌드 시간이 너무 오래 걸리고, 빌드를 최적화시키에는 적용된 모듈 전체에 대한 분석이 필요해 개발자들이 그저 고통받으면서 작업하는걸 지켜본적이 있다.
대규모 프로젝트를 직접 진행해본 경험은 없어 Vite의 단순성이 가져오는 불리함을 겪어보진 못했지만, 현대적인 개발 환경에 적합한 번들러는 Vite가 아닐까 생각한다.