프론트엔드 로드맵 31 - 모듈번들러 Rollupjs

웹팩과 마찬가지로 Rollup은 어플리케이션을 모듈화한 뒤 이 파일들을 번들하는(하나의 파일로 합쳐모으는) 모듈번들러다.

 

프론트엔드 로드맵 30 - 모듈번들러 Web pack

(▲ 웹팩 설명 이전글 참고)

 

안정적이고 많은 이들이 선호하는 웹팩에 비하면 롤업은 아직 피래미 수준이지만, React를 비롯 Vue, Ember, Preact, D3등 많은 라이브러리에서 롤업을 사용하고 있다. 코드들을 쪼개거나 CommonJS dependency로 많은 작업을 할 경우(애플리케이션 제작 등) 웹팩을 쓰고, ES2015 모듈을 베이스로 제작되는 경우(라이브러리에 사용) 롤업을 선호하는 편이다.

 

설치방법

npm install --global rollup

 

<Tree-Shaking>

Tree Shaking은 (나무를 흔들어 떨어뜨린다-)사용하지 않는 코드를 제거함으로써 용량을 줄이는 방식이다.

// CommonJS 전체 utils 객체 불러오기 const utils = require( './utils' ); const query = 'Rollup';  // util 객체를 ajax 메소드로 가져오기 utils.ajax(`https://api.example.com?search=${query}`).then(handleResponse);

기존의 라이브러리를 번들한 뒤 utils를 전부 포함하는 것이 아니라 필요한 부분만 ajax로 가져온다.

 

Webpack과 마찬가지로 Rollup 역시 많은 플러그인들이 있다. 모듈번들러를 잘 다루는 방법은 요 플러그인들을 유용하게 이용해야 한다. => 공식페이지

 

참고 사이트 : https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

https://rollupjs.org/guide/en/