Rollup

ref. https://bepyan.github.io/blog/2023/bundlers

• Rollup 의 정체성은 확장이다.
• 작은 코드조각들을 거대하고 복잡한 어플리케이션 혹은, 라이브러리로 만들어준다고 스스로 소개한다.
• 즉, 같은 소스코드를 다양한 환경에 맞춰 다르게 빌드하는 것을 지향한다.

단일 엔트리 포인트

Entry Point 란

• 롤업은 단일 엔트리 포인트를 가진 프로젝트에서 더 효과적으로 작동한다. 웹팩은 여러 엔트리 포인트와 복잡한 의존성 그래프를 처리하는데 강점이 있지만, 롤업은 단일 엔트리포인트에서 더 간단하고 최적화된 번들을 생성한다.
• 만약 엔트리가 많아지면..옵션을 중복으로 써야해서 config 가 복잡해진다.

웹팩보다 매력적인 점

1. es6 모듈 형태로 빌드 가능

• 웹팩은 CommonJS 형태로만 번들링이 가능했다. (webpack v5부터는 ES6도 가능)
• 라이브러리는 특히나 ES6 번들에 생성에 대한 수요가 강하다.
  • 왜? ES6 환경에선 ES6 번들이 사용되고, CommonJS 환경에서는 CommonJS 번들이 사용되도록 해줘야 라이브러리 사용자는 더 최적화된 애플리케이션을 빌드 가능

2. 더 빠름

• 웹팩은 모듈을 함수로 감싸서 평가하는 방식을 사용함
• 반면 롤업은 모듈을 호이스팅하여 한번에 평가하므로, 성능상 이점이 있음
  • 호이스팅 한 후에 한번에 번들링하여 빠름!
  • 그런데 그렇다면 변수 충돌에 대한 문제는 어떻게?
    • 상황에 따라 식별자를 변경해준다.

3. 더 가벼운 번들을 생성함 (트리쉐이킹)

• tree shaking 은 기본적으로 ES6 코드에서 제대로 동작함 CommonJS 의 트리쉐이킹(tree shaking)이 효율적이지 않은 이유
• 단순히 레퍼런스 되지 않는 코드를 제거하는 것이 아닌, 사용되는 모듈만 AST 트리에 포함시키는 방식으로 불필요한 코드를 제거하기 때문.
• rollup 은 공식 플러그인을 통해 CommonJS 코드를 ES6 코드로 변환 가능

4. CommonJS 코드를 ES6에서도 사용 가능

• ES6에서는 원래 CommonJS 의 require 를 지원하지 않음.