Was ist Flat Bundling und warum ist Rollup besser als Webpack?

Ich habe mich kürzlich mit Rollup befasst und festgestellt , wie es sich von Webpack und anderen Bundlern unterscheidet. Eine Sache, auf die ich gestoßen bin, war, dass es für Bibliotheken wegen "flacher Bündelung" besser ist. Dies basiert auf einem Tweet und einer kürzlich veröffentlichten PR für React zur Verwendung von Rollup .

Nach meiner Erfahrung kann Rollup Bibliotheken besser erstellen, da die Optimierung der Flachbündelung (z. B. Heben) besser ist. 1/2

Webpack 2 ist möglicherweise besser für Sie, wenn Sie Apps mit Code-Splitting usw. bündeln. 2/2

Ich bin mir nicht ganz sicher, was das bedeutet. Worauf bezieht sich die flache Bündelung? Ich weiß, dass in der Dokumentation von Rollup das Baumshaking erwähnt wird , um die Bundle-Größe zu reduzieren, aber Webpack hat auch eine Möglichkeit, dies zu tun . Vielleicht verstehe ich das Konzept einfach nicht ganz.

Bitte beachten Sie, dass dies KEINE Vergleichsfrage zu Rollup vs Webpack ist. Für Interessierte gibt es dafür eine Vergleichstabelle von Webpack . Dies ist in erster Linie die Frage, was flache Bündelung ist? Und was macht Rollup möglicherweise intern, um dies zu erreichen?

Bearbeiten: Rollup unterstützt die Code-Aufteilung - Artikel lesen

Bearbeiten: Webpack unterstützt jetzt in einigen Situationen das Anheben von Bereichen - lesen Sie den Blog-Beitrag hier

Wir haben wahrscheinlich alle unterschiedliche Definitionen für dieses Zeug, aber ich denke, Flat Bundle bedeutet einfach "Nehmen Sie Ihre Module und verwandeln Sie sie in ein einziges Bundle" - dh die "Flat" ist redundant. Der große Unterschied in React 16 besteht darin, dass Sie standardmäßig ein vorgefertigtes Bundle verwenden, anstatt dass Ihre App für die Bündelung der Quellmodule von React verantwortlich ist (obwohl immer ein vorgefertigtes UMD-Bundle von React verfügbar war , das mit Browserify erstellt wurde).

Der große Unterschied zwischen den beiden besteht vielmehr darin, was an den Modulgrenzen passiert . Das Webpack funktioniert so, dass es jedes Modul in eine Funktion einschließt und ein Bundle erstellt, das einen Loader und einen Modulcache implementiert. Zur Laufzeit wird jede dieser Modulfunktionen nacheinander ausgewertet, um den Modulcache zu füllen. Diese Architektur bietet viele Vorteile: Sie ermöglicht die Implementierung erweiterter Funktionen wie Code-Splitting und On-Demand-Laden sowie Hot Module Replacement (HMR).

Rollup verfolgt einen anderen Ansatz - es setzt Ihren gesamten Code auf die gleiche Ebene (Umschreiben von Bezeichnern nach Bedarf, um Konflikte zwischen Variablennamen usw. zu vermeiden). Dies wird oft als " Scope Hoisting " bezeichnet. Aus diesem Grund gibt es keinen Overhead pro Modul und keinen Overhead pro Bundle. Ihr Bundle ist garantiert kleiner und wird auch schneller ausgewertet, da es weniger Indirektion gibt (mehr Informationen dazu - Die Kosten für kleine Module ). Der Nachteil ist, dass dieses Verhalten von der Semantik des ES2015-Moduls abhängt und dass einige der erweiterten Funktionen des Webpacks viel schwieriger zu implementieren sind (z. B. Rollup unterstützt keine Code-Aufteilung, zumindest noch nicht!).

Kurz gesagt, Webpack eignet sich im Allgemeinen besser für Apps und Rollup eignet sich im Allgemeinen besser für Bibliotheken.

Ich habe einen kleinen Überblick zusammengestellt, der die Unterschiede veranschaulicht . Sie können auch ein Gefühl für die Ausgabe von Rollup bekommen, indem Sie an der Rollup-REPL basteln .