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

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

최근 롤업을 알아보고 웹팩이나 다른 번들러와 어떻게 다른지 알아보고 있습니다.한 가지 우연히 알게 된 것은 "플랫 번들"로 인해 도서관에 더 좋다는 것이다.이는 Rollup을 활용하기 위한 최근 React 홍보와 트윗을 기반으로 합니다.

제 경험상, Rollup은 플랫 번들(호이스트 등)에 대한 최적화가 더 잘 되어 있기 때문에 라이브러리를 더 잘 구축할 수 있습니다.1/2

코드 분할 등이 포함된 앱을 번들하고 있다면 웹 팩 2가 더 나을 수 있습니다.2/2

하지만 그게 무슨 뜻인지 잘 모르겠어요.플랫 번들링이란 무엇입니까?Rollup의 문서에는 번들 크기를 줄이는 데 도움이 되는 트리쉐이킹이 기재되어 있는 것을 알고 있습니다만, Webpack에도 이 방법이 있습니다.아마도 나는 그 개념을 완전히 이해하지 못할 것이다.

이것은 롤업과 웹 팩의 비교 질문이 아닙니다.그것에 관심이 있는 분들을 위해 Webpack에 의한 비교표가 있습니다.이것은 주로 플랫 번들이 무엇인지 묻고 있습니다.이를 달성하기 위해 롤업은 내부적으로 어떤 작업을 수행합니까?

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

편집: Webpack은 상황에 따라서는 스코프 호이스트를 서포트하고 있습니다.블로그 투고를 참조해 주세요.

이 기능에 대한 정의는 모두 다를 수 있지만, 플랫 번들은 단순히 '모듈을 하나의 번들로 바꾸는 것'을 의미합니다.즉, 플랫은 용장성이라는 것입니다.React 16의 큰 차이점은 기본적으로는 React의 소스 모듈을 번들하는 대신 사전 제작 번들을 소비한다는 것입니다(Browserify를 사용하여 미리 구축된 React의 UMD 번들이 항상 사용 가능함).

그보다는 모듈 경계에서 일어나는 것이 두 가지 큰 차이입니다.웹 팩은 각 모듈을 함수로 감싸 로더와 모듈캐시를 구현하는 번들을 만듭니다.실행 시 이러한 모듈 기능 각각이 차례로 평가되어 모듈 캐시가 채워집니다.이 아키텍처에는 많은 이점이 있습니다.코드 분할, 온디맨드 로딩, 핫 모듈 교환(HMR) 등의 고도의 기능을 구현할 수 있습니다.

롤업은 다른 방법으로 모든 코드를 같은 레벨로 합니다(변수명간의 경합을 피하기 위해서 필요에 따라서 식별자를 고쳐 씁니다).이를 흔히 '스코프 호이스트'라고 합니다.따라서 모듈별 오버헤드와 번들별 오버헤드가 없습니다.번들의 사이즈는 확실히 작아지고, 다이렉션이 적어지기 때문에 평가도 빨라집니다(소형 모듈의 비용).단점은 이 동작이 ES2015 모듈 의미론에 의존하며, 이는 웹팩의 고급 기능 중 일부는 구현하기가 훨씬 더 어렵다는 것을 의미합니다(예: Rollup은 적어도 아직은 코드 분할을 지원하지 않음).

즉, 일반적으로 웹 팩은 앱에 더 적합하고 롤업은 라이브러리에 더 적합합니다.

나는 차이점을 설명하기 위해 작은 요점을 정리했다.Rollup REPL을 만지작거려도 Rollup의 출력을 알 수 있습니다.

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