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

70

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?

aug
quelle

Antworten:

122

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 .

Rich Harris
quelle
2
Unglaubliche Antwort. Vielen Dank :) macht es viel klarer!
August
3
Es sieht so aus, als hätten Sie einen wirklich großartigen mittleren Beitrag geschrieben, auch über Rollup und Webpack . Ich habe gedacht , ich würde give it a shout out :)
aug
2
Für diese Antwort ist möglicherweise ein Update für Webpack 3 erforderlich, das das Anheben des Bereichs eingeführt hat. medium.com/webpack/webpack-3-official-release-15fd2dd8f07b
cynx
2
Ich werde auch hinzufügen, dass die Webpack 3-Dokumentation für ModuleConcatenationPlugin sehr gut darüber spricht.
August
Sie können Rollup mit gulp4 mit gulp-better-rollup kombinieren und so ziemlich alles mit Rollup tun, was Sie möglicherweise benötigen, indem Sie gulp verwenden, wo Sie möchten. Und Sie können gulp-Dateien in es6 über babel und eine gulpfile.babel.js-Datei anstelle einer gulpfile.js-Datei schreiben. Dies bedeutet, dass Sie Ihren Build in separate Teile aufteilen und die Dinge schön aufräumen können. Ich habe grundsätzlich für alle Apps und Bibliotheken vollständig auf dieses Setup migriert.
Ryan Mann