Bundler 비교
Webpack vs Rollup vs Parcel
자바스크립트는 간단한 작업을 위해 만들어졌지만, 사용자에게 더 나은 경험을 위해 자바스크립트로 구현하는 기능이 많아졌습니다. 따라서 코드의 양이 늘어났고 복잡해졌습니다.
따라서 HTML에서 <script> 태그를 통해 로드하는 것만으로 의존성이 있는 코드 사이에 순서를 보장하기 어려워졌고 따라서 CommonJS, ES6 Module과 같은 모듈화 개념들이 등장하였습니다.
Bundler는 의존성이 있는 모듈 코드를 하나 혹은 여러개의 파일로 만들어주는 도구입니다. Chrome등 최신 브라우저에서는 ES6 Module을 지원하기도 하지만, 모듈화하여 작성한 코드를 브라우저에서 바로 실행할 수 없으므로 가공이 필요한데 번들러가 이 역할을 합니다.
대표적인 번들러로 Webpack, Parcel, Rollup등이 있으며 이제부터 이 세 번들러를 비교해보고자 합니다.
Bundler의 기능
Bundler는 앞서 이야기한 것과 같이 모듈화된 코드를 브라우저에서 실행할 수 있도록 Bundle을 생성하는 것 이외에도 코드축소, Hot reloading, 코드 분할 등 여러 기능을 제공합니다.
Bundler를 선택할 수 있는 기준이 될 기능들을 나열해보면 다음과 같습니다.
- Configuration
- Transformations
- Tree Shaking (Dead code elimination)
- Dev Server
- Hot Module Replacement
Configuration
Configuration을 이야기했을 때, 세 번들러중 가장 튀는 것은 Parcel입니다. Parcel은 config파일을 가지고 있지 않습니다.
Webpack도 config파일 없이 가능하지만, 옵션들을 사용하고자하면 config파일을 필요로합니다.
Rollup은 상대경로를 지원하지만, Webpack은 지원하지 않습니다. 따라서 path.resolve , path.join 등을 사용합니다.
Transformations
Javascript이외의 파일을 처리하기 위해서는 Javascript 형식으로 파일을 변환한 후, Bundler로 전달해야 합니다.
- Webpack에서는 babel-loader, css-loader와 같이 loader를 사용합니다.
- Rollup은 플러그인을 사용합니다.
- Parcel은 별도의 설정파일 없이 다양한 변환을 지원합니다.
Tree Shaking
Tree shaking을 통해 얼마나 Dead code를 지울 수 있는지는 아래의 사이트에서 확인하실 수 있습니다. (https://github.com/mischnic/tree-shaking-example )
주로 Pacel과 Rollup이 좋은 성과를 내는 것을 보실 수 있습니다. 각 번들러의 특징은 다음과 같습니다.
- Webpack은 Tree Shaking을 ES6 모듈에서만 지원을 합니다. 그리고
package.json파일에"sideEffects"항목을 필요로합니다. 그리고 UglifyJS와 같은 minimize tool도 필요로합니다. - Rollup은 기본적으로 코드를 정적으로 분석하고 실제로 사용하지 않는 것을 제외합니다. 기존도구와 모듈을 기반으로 빌드가 가능합니다.
- Parcel은 ES6모듈, CommonJS모듈 모두에서 Tree Shaking을 지원합니다. CommonJS를 사용하는 코드에서 효과적입니다. 또한 대부분의 작업을 캐싱하여 다시 빌드할경우 빠른 속도를 보여줍니다.
Dev Server
- Webpack은
webpack-dev-server를 제공합니다. 이는 live-reload를 지원합니다. - Rollup은 개발서버를 위해
rollup-plugin-serve를 제공합니다. live-reload를 위해서는 추가로rollup-plugin-livereload를 설치해야합니다. - Parcel 에는 개발서버가 내장되어있고 파일을 변경할경우, 다시 빌드합니다.
Hot Module Replacement
Hot Module Replacement는 코드가 실행되는 동안 전체 리로드를 할 필요없이 모듈을 추가 제거할 수 있는 기능을 이야기합니다.
- Webpack은
webpack-dev-server의hot모드를 통해 지원합니다. - Rollup에서는 지원하지 않습니다.
- Parcel은 기본적으로 HMR을 지원합니다.
결론
Webpack, Rollup, Parcel 이 3가지 Bundler를 Bundler가 가지고 있는 기능들에 따라 비교를 해보았습니다. 각 Bundler를 어느경우에 사용해야할지를 생각해보았을 때, 각각의 장점과 단점에 따라 다릅니다.
- 저는 Webpack을 선호할 것 같습니다. 다양한 플러그인과 로더를 통해 개발자에게 광범위한 지원을 해주고 오랜기간 발전한만큼 사용법에 대한 레퍼런스가 많습니다.
- Parcel은 소규모로 Toy 프로젝트를 진행하거나 Bundler 설정에 많은 시간을 할애할 수 없는 경우 사용하는 것을 추천합니다.
- Rollup은 Tree Shaking과 같이 효율성을 고려하는 프로젝트에 추천합니다. 하지만 다른 번들러에서 쉽게했던 작업들을 위해 많은 플러그인을 필요로할 수 있습니다.
참고자료
'FrontEnd' 카테고리의 다른 글
| Next.js 도입 전 Rendering Patterns 알아보기 (1) | 2022.11.27 |
|---|---|
| Deno Fresh 알아보기 (0) | 2022.11.20 |
| Webpack Core Concepts (0) | 2020.02.18 |
| 크롬 개발자 도구 시작하기 (0) | 2020.01.06 |
| 견고한 JS 소프트웨어 만들기 강의노트5 (0) | 2019.09.29 |