Ich verstehe allgemein, dass CommonsChunkPlugin
alle Einstiegspunkte überprüft werden, ob gemeinsame Pakete / Abhängigkeiten zwischen ihnen bestehen, und sie in ein eigenes Bundle aufteilen.
Nehmen wir also an, ich habe die folgende Konfiguration:
...
enrty : {
entry1 : 'entry1.js', //which has 'jquery' as a dependency
entry2 : 'entry2.js', //which has 'jquery as a dependency
vendors : [
'jquery',
'some_jquery_plugin' //which has 'jquery' as a dependency
]
},
output: {
path: PATHS.build,
filename: '[name].bundle.js'
}
...
Wenn ich ohne Verwendung bündle CommonsChunkPlugin
Ich werde mit 3 neuen Bundle-Dateien enden:
entry1.bundle.js
die enthält den vollständigen Code ausentry1.js
undjquery
und enthält eine eigene Laufzeitentry2.bundle.js
die enthält den vollständigen Code ausentry2.js
undjquery
und enthält eine eigene Laufzeitvendors.bundle.js
die enthält den vollständigen Code ausjquery
undsome_jquery_plugin
und enthält eine eigene Laufzeit
Das ist offensichtlich schlecht, weil ich möglicherweise jquery
dreimal auf die Seite laden werde , also wollen wir das nicht.
Wenn ich mit bündle CommonsChunkPlugin
Abhängig davon, welche Argumente ich an CommonsChunkPlugin
eines der folgenden Argumente weitergebe, geschieht Folgendes:
FALL 1: Wenn ich bestanden habe, erhalte
{ name : 'commons' }
ich die folgenden Bundle-Dateien:entry1.bundle.js
Dies enthält den vollständigen Code vonentry1.js
, eine Anforderung fürjquery
und enthält nicht die Laufzeitentry2.bundle.js
Dies enthält den vollständigen Code vonentry2.js
, eine Anforderung fürjquery
und enthält nicht die Laufzeitvendors.bundle.js
Dies enthält den vollständigen Code vonsome_jquery_plugin
, eine Anforderung fürjquery
und enthält nicht die Laufzeitcommons.bundle.js
welches den vollständigen Code vonjquery
und die Laufzeit enthält
Auf diese Weise erhalten wir insgesamt einige kleinere Bundles und die Laufzeit ist im
commons
Bundle enthalten. Ziemlich ok, aber nicht ideal.FALL 2: Wenn ich bestanden habe, erhalte
{ name : 'vendors' }
ich die folgenden Bundle-Dateien:entry1.bundle.js
Dies enthält den vollständigen Code vonentry1.js
, eine Anforderung fürjquery
und enthält nicht die Laufzeitentry2.bundle.js
Dies enthält den vollständigen Code vonentry2.js
, eine Anforderung fürjquery
und enthält nicht die Laufzeitvendors.bundle.js
die enthält den vollständigen Code ausjquery
undsome_jquery_plugin
und enthält die Laufzeit.
Auf diese Weise erhalten wir wieder einige kleinere Bundles insgesamt, aber die Laufzeit ist jetzt im
vendors
Bundle enthalten. Es ist etwas schlimmer als im vorherigen Fall, da die Laufzeit jetzt imvendors
Bundle enthalten ist.FALL 3: Wenn ich bestanden habe, erhalte
{ names : ['vendors', 'manifest'] }
ich die folgenden Bundle-Dateien:entry1.bundle.js
Dies enthält den vollständigen Code vonentry1.js
, eine Anforderung fürjquery
und enthält nicht die Laufzeitentry2.bundle.js
Dies enthält den vollständigen Code vonentry2.js
, eine Anforderung fürjquery
und enthält nicht die Laufzeitvendors.bundle.js
welches den vollständigen Code vonjquery
und enthältsome_jquery_plugin
und nicht die Laufzeit enthältmanifest.bundle.js
Dies enthält Anforderungen für jedes andere Bundle und die Laufzeit
Auf diese Weise erhalten wir insgesamt einige kleinere Bundles und die Laufzeit ist im
manifest
Bundle enthalten. Dies ist der Idealfall.
Was ich nicht verstehe / Ich bin nicht sicher, ob ich es verstehe
Warum haben wir in FALL 2 das
vendors
Bundle erhalten, das sowohl den gemeinsamen Code (jquery
) als auch alles enthält, was vomvendors
Eintrag (some_jquery_plugin
) übrig geblieben ist ? Nach meinem Verständnis hat dasCommonsChunkPlugin
hier den gemeinsamen Code (jquery
) gesammelt , und da wir ihn gezwungen haben, ihn in dasvendors
Bundle auszugeben , hat es den gemeinsamen Code in dasvendors
Bundle "zusammengeführt" (das jetzt nur den Code von enthält)some_jquery_plugin
). Bitte bestätigen oder erklären.In Fall 3 verstehe ich nicht, was passiert ist, als wir
{ names : ['vendors', 'manifest'] }
zum Plugin übergegangen sind . Warum / wie wurde dasvendors
Bundle intakt gehalten, das beides enthielt,jquery
undsome_jquery_plugin
wannjquery
ist eindeutig eine gemeinsame Abhängigkeit, und warum wurde die generiertemanifest.bundle.js
Datei so erstellt, wie sie erstellt wurde (alle anderen Bundles erforderlich und die Laufzeit enthalten)?
quelle
Antworten:
So funktioniert das
CommonsChunkPlugin
.Ein gemeinsamer Block "empfängt" die Module, die von mehreren Eintragsblöcken gemeinsam genutzt werden. Ein gutes Beispiel für eine komplexe Konfiguration finden Sie im Webpack-Repository .
Das
CommonsChunkPlugin
wird während der Optimierungsphase von Webpack ausgeführt, was bedeutet, dass es im Speicher ausgeführt wird, kurz bevor die Chunks versiegelt und auf die Festplatte geschrieben werden.Wenn mehrere gemeinsame Blöcke definiert sind, werden sie der Reihe nach verarbeitet. In Ihrem Fall 3 ist es so, als würde man das Plugin zweimal ausführen. Beachten Sie jedoch, dass die
CommonsChunkPlugin
Konfiguration komplexer sein kann (minSize, minChunks usw.), was sich auf die Art und Weise auswirkt, wie Module verschoben werden.FALL 1:
entry
Stücke (entry1
,entry2
undvendors
).commons
Block als gemeinsamen Block fest.commons
allgemeinen Block (da der Block nicht vorhanden ist, wird er erstellt):entry1
,entry2
undvendors
Verwendungjquery
so das Modul aus diesen Brocken entfernt ist und mit dem zusätzlichencommons
Brocken.commons
Klumpen wird als markiertentry
Brocken , während dieentry1
,entry2
undvendors
Stücke wie unmarkierte werdenentry
.commons
Chunk einentry
Chunk ist, enthält er schließlich die Laufzeit und dasjquery
Modul.FALL 2:
entry
Stücke (entry1
,entry2
undvendors
).vendors
Block als gemeinsamen Block fest.vendors
gemeinsamen Block:entry1
undentry2
verwendet,jquery
damit das Modul aus diesen Chunks entfernt wird (beachten Sie, dass es nicht zumvendors
Chunk hinzugefügt wird, da dervendors
Chunk es bereits enthält).vendors
Klumpen wird als markiertentry
Brocken , während dieentry1
undentry2
Brocken als unmarkierte werdenentry
.vendors
Block einentry
Block ist, enthält er schließlich die Laufzeit und diejquery
/jquery_plugin
Module.Fall 3:
entry
Stücke (entry1
,entry2
undvendors
).vendors
Block und denmanifest
Block als allgemeine Blöcke fest.manifest
Chunk, da er nicht vorhanden ist.vendors
gemeinsamen Block:entry1
undentry2
verwendet,jquery
damit das Modul aus diesen Chunks entfernt wird (beachten Sie, dass es nicht zumvendors
Chunk hinzugefügt wird, da dervendors
Chunk es bereits enthält).vendors
Klumpen wird als markiertentry
Brocken , während dieentry1
undentry2
Brocken als unmarkierte werdenentry
.manifest
allgemeinen Block (da der Block nicht vorhanden ist, wird er erstellt):manifest
markiert,entry
während derentry1
,entry2
undvendors
ist nicht markiert alsentry
.manifest
Block einentry
Block ist, enthält er schließlich die Laufzeit.Ich hoffe es hilft.
quelle
{ names : ['vendors', 'manifest'] }
ist wie es zweimal auszuführen, einmal mit{ name : 'vendors' }
und einmal mit{ name : 'manifest' }
, richtig? 3) Wenn wir sagen "Das Plugin verarbeitet einen gemeinsamen Block", meinen wir, dass es den Inhalt erstellt, den es in diebundle.js
Datei spuckt , in den Speicher, richtig? 4) Bis es "alle gängigen Chunks verarbeitet" hat, hat es überhaupt keine Ausgabe in eine Datei geschrieben, es ist alles im Speicherentry1.js
undentry2.js
hatten eine andere gemeinsame Datei als diejquery
DateiownLib.js
.ownLib.js
Würde in FALL 2 und FALL 3 dasvendors.bundle.js
Richtige landen ? Wie würden Sie es schaffen, dass andere gängige Dateien als Herstellerdateien, abgesehen vom Block, in ihren eigenen Block getrennt werdenvendors
? Tut mir leid, dass ich Sie gestört habe, aber ich lerne immer noch, wie man Webpack benutztownLib.js
würde in den ersten gemeinsamen Chunck gelegt werden. Wenn Sie allgemeine Abhängigkeiten in einem anderen Chunck sammeln möchten, müssen Sie Folgendes übergeben :{ names : ['common', 'vendors', 'manifest'] }
.