플랫 번들링이란 무엇이며 롤업이 Webpack보다 더 나은 이유는 무엇입니까?

플랫 번들링이란 무엇이며 롤업이 Webpack보다 더 나은 이유는 무엇입니까?

---

최근에 롤업을 조사 하고 Webpack 및 다른 번 들러와 어떻게 다른지 확인했습니다. 제가 발견 한 한 가지는 "플랫 번들링"때문에 도서관에 더 좋다는 것입니다. 이것은 트윗 과 React가 Rollup을 활용하기위한 최근 PR을 기반으로합니다 .

내 경험상 Rollup은 플랫 번들링 (예 : 호이 스팅)에 대한 더 나은 최적화로 인해 라이브러리를 빌드하는 데 더 좋습니다. 1/2

코드 분할 등으로 앱을 번들링하는 경우 Webpack 2가 더 좋을 수 있습니다. 2/2

나는 그것이 의미하는 바를 이해하고 있는지 완전히 확신하지 못합니다. 플랫 번들링은 무엇을 의미합니까? Rollup의 문서에 번들 크기를 줄이는 데 도움이되는 트리 쉐이킹 이 언급 되어 있지만 Webpack에는이를 수행하는 방법도 있습니다 . 아마도 나는 개념을 완전히 이해하지 못할 것입니다.

이것은 Rollup과 Webpack에 대한 비교 질문이 아닙니다. 그것에 관심이있는 사람들을 위해 Webpack 의 비교 차트가 있습니다. 이것은 주로 플랫 번들링이 무엇인지 묻는 것입니다. 그리고 잠재적으로 이것을 달성하기 위해 Rollup이 내부적으로 무엇을할까요?

---

편집 : 롤업은 코드 분할을 지원합니다- 기사 읽기

편집 : Webpack은 이제 일부 상황에서 범위 호이 스팅을 지원합니다. 여기에서 블로그 게시물을 읽어보십시오

우리는 모두이 부분에 대해 다른 정의를 가지고있을 것입니다.하지만 플랫 번들링은 단순히 '모듈을 하나의 번들로 바꾸는 것'을 의미한다고 생각합니다. 즉, '플랫'은 중복됩니다. React 16의 가장 큰 차이점은 React의 소스 모듈을 번들링하는 앱이 아니라 기본적으로 미리 만들어진 번들을 사용한다는 것입니다 (브라우저 파이로 빌드 된 React 의 미리 빌드 된 UMD 번들 이 항상 사용 가능 했지만).

오히려 둘 사이의 큰 차이점 은 모듈 경계에서 일어나는 일 입니다. 웹팩이 작동하는 방식은 각 모듈을 함수로 감싸고 로더와 모듈 캐시를 구현하는 번들을 생성하는 것입니다. 런타임시 이러한 각 모듈 함수가 차례로 평가되어 모듈 캐시를 채 웁니다. 이 아키텍처에는 많은 장점이 있습니다.이를 통해 코드 분할 및 주문형로드, HMR (핫 모듈 교체)과 같은 고급 기능을 구현할 수 있습니다.

롤업은 다른 접근 방식을 취합니다. 모든 코드를 동일한 수준에 둡니다 (변수 이름 간의 충돌 등을 피하기 위해 필요에 따라 식별자를 다시 작성). 이를 종종 ' 스코프 호이 스팅 ' 이라고합니다 . 그로 인해 모듈 당 오버 헤드가없고 번들 당 오버 헤드가 없습니다. 귀하의 번들은 더 작을 것이 보장되며 간접적 요소가 적기 때문에 더 빨리 평가 될 것입니다 (더 많은 정보 — 소규모 모듈의 비용 ). 단점은이 동작이 ES2015 모듈 의미 체계에 의존한다는 것입니다. 이는 웹팩의 일부 고급 기능을 구현하기가 훨씬 더 어렵다는 것을 의미합니다 (예 : 롤업은 적어도 아직 코드 분할을 지원하지 않습니다!).

간단히 말해서 웹팩은 일반적으로 앱에 더 적합하고 롤업은 일반적으로 라이브러리에 더 적합합니다.

차이점을 설명 하는 작은 요점을 모았습니다 . Rollup REPL 을 수정하여 Rollup의 출력에 대한 느낌을 얻을 수도 있습니다 .

참고 URL : https://stackoverflow.com/questions/43219030/what-is-flat-bundling-and-why-is-rollup-better-at-this-than-webpack