2022/12/05 - Bundler

 

현재 react-wai에서는 bundler로써 webpack을 사용하고 있었는데, 파일을 번들링을 하는 과정에서, esm, amd와 같이 원하는 형태로 번들링을 하는 것보다 다른 번들러를 사용해 보는 것은 어떨까 고민하다가 Rollup에 대해서 검색을 해보았다.

이전에 발생했던, styled-components에서의 이슈를 보면 Rollup에 대한 이야기가 많았기에 어떤 건지 궁금했다.

번들러의 종류

(간단한 그림으로 번들러들의 요약해보자!, 출처는 하단에..)

rollup이 라이브러리에 유리해! 이걸 쓰자 라고 결정하는 것보다는 webpack과 rollup을 비교하고 사용을 하기 위해 간단히 검색하였다.

Webpack vs Rollup

Webpack

---

1. Webpack은 ESM(ES Module)형태의 번들이 불가능합니다.
2. Webpack에서 빌드할 시 중복 코드 제거가 되지 않습니다.
3. Webpack에서 빌드할 시 기본 용량이 큽니다.
4. Webpack3에서 Tree Shaking이 잘 이루어지지 않습니다.
5. Webpack에서 commonjs로 번들링한 라이브러리를 나중에 다른 프로젝트에서 사용하게 되면 Tree-shaking이 지원되지 않습니다.

---

Rollup

---

웹팩과 비교했을 때 장점

1. ESM형태로 번들이 가능합니다.
2. 모듈간의 import/export과정이 사라지기 때문에 중복되는 코드가 제거됩니다.
3. Webpack3에서도 Tree Shaking이 잘 됩니다.

웹팩과 비교했을 때 단점

1. entry(input, output)가 많아질수록 복잡해질 수 있습니다.
2. plugin의 규칙을 정할 수 없습니다.

---

우webpack을 웹 어플리케이션에서 사용할 때는

웹 어플리케이션을 제작할 때는 webpack이 좋지만, rollup처럼 라이브러리를 제작할 때는 rollup이 더 낫다. 그리고, rollup의 단점도, entry를 한 개만 필요로 하는 컴포넌트 제공라이브러리이기 때문에 rollup을 사용하기로 결정하였다.

Ref

---

https://yozm.wishket.com/magazine/detail/1261/

https://medium.com/naver-fe-platform/webpack에서-rollup전환기-137dc45cbc38

https://flamingotiger.github.io/frontend/DevEnv/rollup-setup/