Weback 2번째 이야기.. Rollup

기존 Webpack의 내용을 정리했으나, 정확히 개념이 잡히지 않아서 다시 정리 해보았습니다.

2020/07/21 - [개발자 놀이터/Javascript] - Webpack

Webpack

Webpack 필요한 이유는? 규모가 있는 프로젝트에서 여러 javascript 파일을 하나로 관리하기에 어려움이 있습니다.

그렇다면, 여러개로 호출 할까 하면 여러개 파일을 브라우저에서 하나씩 로딩하는 비용(네트워크 비용 == 속도)가 느려진다.

 

webpack은? javascript application의 static module bundler, 실행이되면 dependencies graph를 통해 필요한 형태의 하나 혹은 여러개의 bundle로 생성 합니다

*bundle이란? 각각의 모듈들에 대한 의존성 관계를 파악하여, 하나의 혹 여러 그룹 (모든것을 포함하는 패키지 개념)

다른 moudle bundler가 많은데 이게 Performance가 우수합니다. 그래서 씀.

 

나머지 세부 옵션은 전에 쓴 이야기를 재 참조 하면 되겠습니다.

 

Rollup이란? =webpack과 같은 역활을 함.

 

webpack은 ES module 형태로 번들을 할수가 없습니다.

webpack을 사용 할 때에는 일반적으로 commonjs형태로 번들링을 하게 되는데 commonjs로 번들링한 라이브러리를 나중에 다른 프로젝트에서 사용하게 되면 Tree-shaking이 지원되지 않습니다.

 

If, 우리가 등록한 라이브러리를 설치하고 그 중에서 Button 컴포넌트만 사용을 했다고 가정을 해봅시다.

Tree-shaking이 되었다면, 프로젝트를 빌드했을 때, Dialog 컴포넌트를 사용하지 않았기 때문에 빌드된 파일에도 Dialog관련 코드가 없습니다. 반면 Tree-shaking이 도지 않았다면 Dialog 컴포넌트를 사용하지 않아도 관련 코드가 결과물안에 포함이 됩니다,

 

참고 내용 - 본문은 아래에 있습니다. 해당 글이 문제가 있다면, 삭제 하도록 하겠습니다.

https://velog.io/@velopert/bundle-with-rollup-and-publish-to-npm

Rollup을 사용하여 디자인 시스템 번들 후, npm 라이브러리로 배포하기