Kann jemand das CommonsChunkPlugin von Webpack erklären
Ich verstehe allgemein, dass dieCommonsChunkPlugin
untersucht alle Einstiegspunkte, prüft, ob gemeinsame Pakete / Abhängigkeiten vorhanden sind, und teilt sie in ein eigenes Bundle auf.
So nehmen wir 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 bündle, ohne @ zu verwendCommonsChunkPlugin
Ich werde mit 3 neuen Bundle-Dateien enden:
entry1.bundle.js
welches den kompletten Code von @ enthäentry1.js
undjquery
und enthält eine eigene Laufzeitentry2.bundle.js
welches den kompletten Code von @ enthäentry2.js
undjquery
und enthält eine eigene Laufzeitvendors.bundle.js
welches den kompletten Code von @ enthäjquery
undsome_jquery_plugin
und enthält eine eigene LaufzeitDas ist offensichtlich schlecht, weil ich möglicherweise laden werdejquery
3 mal auf der Seite, also wollen wir das nicht.
CommonsChunkPlugin
Abhängig davon, welche Argumente ich an @ übergeCommonsChunkPlugin
Folgendes wird passieren:
FALL 1 Wenn ich @ passie{ name : 'commons' }
Ich werde mit den folgenden Bundle-Dateien enden:
entry1.bundle.js
welches den kompletten Code von @ enthäentry1.js
, eine Voraussetzung fürjq,uery
und enthält nicht die Laufzeitentry2.bundle.js
welches den kompletten Code von @ enthäentry2.js
, eine Voraussetzung fürjquery
und enthält nicht die Laufzeitvendors.bundle.js
welches den kompletten Code von @ enthäsome_jquery_plugin
, eine Voraussetzung fürjquery
und enthält nicht die Laufzeitcommons.bundle.js
welches den kompletten Code von @ enthäjquery
und enthält die Laufzeit Auf diese Weise erhalten wir insgesamt einige kleinere Bundles, und die Laufzeit ist im @ enthaltecommons
Bundle. Ziemlich ok, aber nicht ideal.
FALL 2: Wenn ich @ passie{ name : 'vendors' }
Ich werde mit den folgenden Bundle-Dateien enden:
entry1.bundle.js
welches den kompletten Code von @ enthäentry1.js
, eine Voraussetzung fürjquery
und enthält nicht die Laufzeitentry2.bundle.js
welches den kompletten Code von @ enthäentry2.js
, eine Voraussetzung fürjquery
und enthält nicht die Laufzeitvendors.bundle.js
welches den kompletten Code von @ enthäjquery
undsome_jquery_plugin
und enthält die Laufzeit. Auf diese Weise haben wir wieder insgesamt ein paar kleinere Bundles, aber die Laufzeit ist jetzt im @ enthaltevendors
Bundle. Es ist ein bisschen schlimmer als der vorherige Fall, da die Laufzeit jetzt im @ ivendors
Bundle.
FALL 3: Wenn ich @ passie{ names : ['vendors', 'manifest'] }
Ich werde mit den folgenden Bundle-Dateien enden:
entry1.bundle.js
welches den kompletten Code von @ enthäentry1.js
, eine Voraussetzung fürjquery
und enthält nicht die Laufzeitentry2.bundle.js
welches den kompletten Code von @ enthäentry2.js
, eine Voraussetzung fürjquery
und enthält nicht die Laufzeitvendors.bundle.js
welches den kompletten Code von @ enthäjquery
undsome_jquery_plugin
und enthält nicht die Laufzeitmanifest.bundle.js
enthält Anforderungen für jedes andere Bundle und enthält die Laufzeit Auf diese Weise erhalten wir insgesamt einige kleinere Bundles, und die Laufzeit ist im @ enthaltemanifest
Bundle. Dies ist der Idealfall.
ImCASE 2 Warum haben wir am Ende mit demvendors
Bundle mit dem gemeinsamen Code jquery
) und was auch immer vom @ übrig geblieben ivendors
entry some_jquery_plugin
)? Nach meinem Verständnis, was dasCommonsChunkPlugin
hat hier war, dass es den gemeinsamen Code gesammelt jquery
), und da wir es gezwungen haben, es auf dem @ auszugebvendors
Bundle, es "verschmolz" Art der gemeinsamen Code in dievendors
Bundle (das jetzt nur den Code von @ enthielsome_jquery_plugin
).Bitte bestätigen oder erklären.
ImCASE 3 Ich verstehe nicht, was passiert ist, als wir bestanden{ names : ['vendors', 'manifest'] }
zum Plugin. Warum / wie war dasvendors
Bundle intakt gehalten, enthält beidejquery
undsome_jquery_plugin
, wannjquery
ist eindeutig eine häufige Abhängigkeit, und warum wurde das generiertemanifest.bundle.js
-Datei so erstellt, wie sie erstellt wurde (erfordert alle anderen Bundles und enthält die Laufzeit)?