JS 라이브러리를 만들 건데 Rollup을 쓰면 되나요?

번들러

번들링은 JavaScript와 프론트엔드의 생태계에서 빼먹을 수 없는 큰 요소라고 생각합니다. 번들링과 모듈 개념만 두고 공부해 보면 거의 웹 개발의 역사를 훑게 되다 보니 항상 공부할 엄두가 잘 안 나기도 합니다.

코드 번들링을 정의한다면, 어플리케이션이 돌아가기 위해 필요한 모든 코드와 파일을 효율적으로 합치는 작업이라고 볼 수 있습니다. 이런 작업이 필요한 이유는 애플리케이션 개발에는 외부 의존성도 많이 쓰이고, 개발의 편의를 위해 여러 파일로 나눠둔 코드를 실행을 위해서 하나로 합치는 것이 리소스 면에서 효율적이기 때문입니다.

제가 처음 공부를 할 때는 번들러가 이렇게 다양한지 몰랐고, 근본이라 볼 수 있는 Webpack으로만 번들을 했었습니다. 막상 일을 시작하고 실제로 라이브러리를 만드는 작업을 해보니 Rollup의 추천이 압도적으로 많았는데 이번 기회에 공식 문서와 chatGPT, 의식의 흐름식 검색을 통해 왜 Rollup이 라이브러리 번들러로 추천 받는지를 정리해 보았습니다.

TL;DR

Rollup이 Webpack 대비 갖는 장점은 이렇습니다.

1. config 파일이 훨씬 간단하다
2. 더 엄격한 tree shaking을 진행하기 때문에 번들의 사이즈가 작다
3. ES6 기반의 모듈 번들러이기 때문에 ES6로 작성된 라이브러리 번들링에 유리하다
4. 번들링 속도가 빠르다

라이브러리를 제작하는 경우, 실제로 애플리케이션이 동작하는 것이 아니기 때문에 안정성보다는 번들의 사이즈와 개발 편의성 중심으로 번들러를 선택하기 때문에 Rollup이 추천받는 것이라 느껴집니다.

Rollup

Rollup

Rollup도 결국 Webpack처럼 번들러 중 하나입니다. Vite가 번들러로 Rollup을 채택하기도 했습니다. 공식 문서에서 정리해 둔 Rollup과 관련된 특징과 FAQ를 정리해 봤습니다.

• ES6 모듈 기반으로 동작하는 모듈 번들러
  • ES 모듈을 해석할 수 있는 건 다른 번들러도 가능하기에 엄청나게 독특한 특징은 아니라고 봅니다. ES 모듈 자체의 장점을 본다면 의존성의 정적 분석이 가능하다는 점입니다. 런타임에 판단하는 것이 아니라 미리 컴파일(번들링) 하는 단계에서 의존성 트리를 파악할 수 있고, 그 과정에서 불필요한 죽은 코드도 더 효율적으로 걷어낼 수 있습니다.
  • commonJS 모듈은 사용하는 라이브러리 전체를 불러와야 하는 구조인 반면, ES 모듈은 필요한 코드만 가져오기 때문에 훨씬 효율적입니다.
• ES 모듈을 지원하지 않는 환경에 대응하기 위해선 UMD나 CJS 포맷으로 컴파일할 수 있습니다. 이는 commonjs, node-resolve 플러그인을 사용하면 가능합니다. 그 후 package.json에 번들된 결과 파일명을 명시해 주면 됩니다. (참고)
  • package.json에 main 필드에 지정하는 파일이 기본 파일입니다. 여기에 UMD/CJS 포맷의 파일을 명시해 줍니다.
  • module 필드에는 ES 모듈 파일을 명시합니다. 이 필드가 존재하면 Rollup이나 Webpack 2 버전 이상의 번들러에서는 알아서 ES 모듈을 가져가 사용합니다.
• node-resolve 같은 플러그인을 Rollup의 기본 기능으로 탑재하지 않는 이유는 두 가지 이유가 있습니다.
  1. Rollup의 역할은 Node나 브라우저 등에서 사용하는 모듈 로더의 폴리필이기 때문입니다. Node와 브라우저에서 필요한 모듈(파일)을 찾는 방식(resoultion algorithm)이 다릅니다. 즉, 특정 한 방식을 고수하는 것이 아니라 모든 환경에서 지원되도록 번들링을 지원하고자 하는 철학이 있어서라고 합니다. (정확히 이해한 것은 아니어서 표현이 이상할 수도 있습니다.)
  2. 필수적인 기능만 core에 포함하고 그 외에는 플러그인이나 외부 API 등으로 추가하는 편이 유지보수 면에서 유리합니다.

dev server

애플리케이션의 경우 webpack의 dev server가 아직까지는 안정적이고 좋은 성능을 보여주기 때문에 많이들 webpack을 계속 사용하고 계실 거 같습니다. 다만 최근에는 Vite 같은 강력한 대체제가 등장하고 있고, Vite가 Rollup을 내부 번들러로 사용하기 때문에 결국 번들러 시장에서는 Webpack과 Rollup 이 둘의 선호도가 높다고도 볼 수 있지 않나 싶습니다.