Rollup이 번들러 게임을 바꾼 이유

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자 및 번들링 도구 사용자, 중급~고급 수준

핵심 요약

• Browserify의 번들 크기 문제로 인해 Rollup이 등장했으며, ES6 모듈 기반의 효율적인 번들링을 가능하게 했다.
• 라이브러리 중심의 철학으로, 복잡한 설정 없이 간결한 출력과 효율적인 로직을 제공한다.
• 점진적인 진화를 통해 코드 분할, 성능 개선, Vite와의 연동 등 현대 JavaScript 도구 생태계에 영향을 미쳤다.

섹션별 세부 요약

1. Bloated bundles

• Browserify의 번들 크기 문제로 모바일 성능 저하와 개발자 고통이 발생했다.
• Rich Harris가 ES6 모듈을 활용한 번들링 방식의 필요성을 인식하게 되었다.

2. ES6 modules: the building blocks

• 당시 브라우저는 ES6 모듈을 완전히 지원하지 않았지만, 모듈 구조를 기반으로 최적화가 가능했다.
• Rollup은 ES6 모듈을 기반으로 작은, 효율적인 번들을 생성하는 데 초점을 맞췄다.

3. A library-first philosophy

• Webpack과 달리 라이브러리 중심으로 설계되어, 불필요한 보일러플레이트 코드를 제거했다.
• Vue, D3 등 많은 프로젝트가 Rollup을 조기에 채택했다.

4. Growth through gradual evolution

• Rollup은 점진적인 기능 확장을 통해 코드 분할, 성능 개선, Vite와의 통합을 이뤘다.
• 현재는 많은 인기 라이브러리와 도구에서 Rollup을 사용하며, 현대 JavaScript 생태계에 영향을 미치고 있다.

결론

• Rollup은 라이브러리 중심의 번들링 전략과 ES6 모듈 기반의 효율성으로 현대 웹 개발을 혁신했으며, Vite와의 연동을 통해 지속적으로 발전하고 있다.