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 Laufzeit

Das ist offensichtlich schlecht, weil ich möglicherweise laden werdejquery 3 mal auf der Seite, also wollen wir das nicht.

Wenn ich mit @ bündCommonsChunkPlugin

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.

Was ich nicht verstehe / ich bin nicht sicher, ob ich @ verste

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)?

Antworten auf die Frage(2)

Ihre Antwort auf die Frage