Was ist flache Bündelung und warum ist Rollup besser als Webpack?

Question

Ich habe kürzlich in rollup untersucht und sehen, wie es sich von Webpack und anderen Bundler unterscheidet. Eine Sache, die mir auffiel, war, dass es besser für Bibliotheken ist, weil sie "flach bündeln". Dies basiert auf einer tweet und a recent PR for React to utilize Rollup.

Nach meiner Erfahrung ist Rollup besser im Bau von Bibliotheken aufgrund besserer Optimierungen rund um flache Bündelung (z. B. hissen). 1/2

Webpack 2 könnte besser für Sie sein, wenn Sie Apps mit Code-Splitting usw. jedoch bündeln. 2/2

Ich bin mir nicht ganz sicher, ob ich verstehe, was das bedeutet. Worauf bezieht sich Flat Bundling? Ich weiß, dass Rollups Dokumentation treeshaking erwähnt, um die Bündelgröße zu reduzieren, aber Webpack also has a way of doing this. Vielleicht verstehe ich das Konzept nicht ganz.

Bitte beachten Sie, dies ist KEINE Vergleichsfrage bezüglich Rollup vs Webpack. Für Interessierte gibt es eine comparison chart for that by Webpack. In erster Linie wird gefragt, was Flat Bundling ist? Und was macht Rollup möglicherweise intern, um dies zu erreichen?

Answer 1

Edit: Webpack unterstützt jetzt Umfang in einigen Situationen Hissen - read the blog post here

wir wahrscheinlich alle haben unterschiedliche Definitionen für diese Sachen, aber ich denke, flach Bündelung bedeutet einfach ‚Ihre Module zu nehmen und sie zu einem einzigen Bündel drehen "- dh die" Wohnung "ist überflüssig. 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 es immer eine mit Browserify erstellte prebuilt UMD bundle of React available gab). Der große Unterschied zwischen den beiden ist, was passiert an den Modulgrenzen. Die Funktionsweise von Webpack besteht darin, dass jedes Modul in eine Funktion eingebunden wird und ein Paket erstellt wird, das einen Loader und einen Modulcache implementiert. Zur Laufzeit wird jede dieser Modulfunktionen ausgewertet, um den Modul-Cache aufzufüllen. Diese Architektur bietet viele Vorteile - sie ermöglicht die Implementierung erweiterter Funktionen wie Code-Splitting, On-Demand-Laden und Hot Module Replacement (HMR).

Rollup hat einen anderen Ansatz - es setzt den gesamten Code auf die gleiche Ebene (das Umschreiben von Bezeichnern wie erforderlich, um Konflikte zwischen Variablennamen usw. zu vermeiden). Dies wird oft als "Zielfernrohr hissen" bezeichnet. Aus diesem Grund gibt es keinen Aufwand pro Modul und keinen Overhead pro Paket. Ihr Bundle ist garantiert kleiner und wird auch schneller ausgewertet, da es weniger Umleitung gibt (mehr Informationen dazu - The cost of small modules). Der Kompromiss besteht darin, dass dieses Verhalten auf der ES2015-Modul-Semantik beruht und dass einige der erweiterten Funktionen des Webpacks viel schwieriger zu implementieren sind (z. B. unterstützt Rollup Code-Splitting noch nicht, zumindest noch nicht!).

Kurz, ist webpack allgemein eine bessere Passform für Apps und Rollup ist im Allgemeinen eine bessere Passform für Bibliotheken.

Ich habe eine small gist illustrating the differences zusammengestellt. Sie können auch ein Gefühl für Rollup-Ausgabe von tinkering with the Rollup REPL bekommen.