webpack과 rollup 중 어떤게 좋을까?

date

Oct 20, 2022

thumbnail

slug

author

status

Published

시작하며

번들러

먼저 번들러를 왜 사용해야하는지 알아봅시다.최신 브라우저에서는 ES6 Module을 지원하기도 하지만, 모듈화 하여 작성한 코드를 브라우저에서 바로 실행할 수 없으므로 여러 브라우저에서 동작하도록 가공을 해주는 역할을 바로 이 번들러가 해주게 됩니다.

번들러의 기능

Bundler는 앞서 이야기한 것과 같이 모듈화된 코드를 브라우저에서 실행할 수 있도록 Bundle을 생성하는 것 이외에도 코드축소, Hot reloading, 코드 분할 등 여러 기능을 제공합니다.

Configuration

대부분의 번들러는 entry, output, plugin 등을 설정하는 구성파일을 필요로 합니다.롤업에는 import/export를 위한 node/polyfill이 있지만, 웹팩은 polyfill을 지원하지 않습니다.

Polyfill브라우저에서 지원하지 않는 코드를 사용가능한 코드 조각이나 플러그인(추가기능)을 지원하게 해주는 기능

Babel 사용하면 되지 않나요?
ES5에 존재하지 않는 ES6의 Map, Promise, Set, Object.assigin() 이런애들은 존재하지 않으니 번역을 해줄수가 없습니다.이러한 경우 우리는 Polyfill을 이용해서 이슈를 해결할 수 있습니다.(Map, Promise, Set 등을 사용가능한 객체로 만들어준다)babel 은 babel-polyfill 모듈을 사용하면 되지만, 현재 deprecated 되었기 때문에 core-js와 regenerator-runtime을 직접 사용하는 방식을 제안하고 있습니다.

Transformations

Javascript 이외의 파일을 처리하기 위해서는 Javascript 형식으로 파일을 변환한 후, Bundler로 전달을 해주어야 합니다.

Webpack에서는 loader를 사용하며 Rollup은 플러그인을 사용합니다.

Tree Shaking (Dead code elimination)

Rollup은 코드를 정적으로 분석하고 실제로 사용되지 않는 코드는 제외하여 빌드합니다.

Webpack은 Tree shaking을 ES6 모듈에서만 지원하기 때문에 package.json 에서 SideEffects 항목을 작성해야합니다.(UglifyJSPlugin같은 툴을 사용하기도 합니다.)

Code splitting

Webpack은 최소한의 작업과 로드 시간이 더 빠르다는 점을 가지고 있습니다.entry 설정을 사용하거나 CommonChunk 플러그인을 사용하여 청크를 중복 제거 하고 분할하거나, 모듈 내 인라인 함수를 불러와 동적으로 import 하는 Code Splitting을 활성화 하는 세가지 접근 방식이 있습니다.

Rollup의 Code splitting은 동적 로딩이나 다중 진입점과 같이 Rollup이 코드를 자동으로 청크로 분할하는 경우가 있으며 output.manualChunks옵션을 통해 별도의 청크로 분할할 모듈을 Rollup에 명시적으로 알려주는 방법이 있습니다.

HMR(Hot Module Replacement)

개발 하는 동안 변경사항을 확인하기 위해 수동으로 새로 고치는 대신 작성한 새로운 코드로 앱을 업데이트 하는것이 좋습니다.

Webpack은 wepback-dev-server에서 HMR를 제공합니다.

결론

최소한의 서드파티로 라이브러리를 만들고 싶다면 Rollup,많은 서드파티를 필요로 하는 복잡한 애플리케이션에는 Webpack

Refhttps://webpack.kr/configuration/Rollup vs. Parcel vs. webpack: Which Is the Best Bundler?Benchmarking bundlers 2020: Rollup vs. Parcel vs. webpack