Quelqu'un peut-il expliquer le protocole CommonsChunkPlugin de Webpack?

Question

Je reçois le sens général que l' CommonsChunkPlugin regarde tous les points d'entrée, vérifie si il y a des paquets courants/les dépendances entre eux et les sépare dans leur bundle.

Ainsi, supposons que j'ai la configuration suivante:

...
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'
}
...

Si je bundle sans l'aide d' CommonsChunkPlugin

Je vais finir avec 3 nouveaux groupes de fichiers:

• entry1.bundle.js qui contient le code complet de entry1.js et jquery et contient sa propre exécution
• entry2.bundle.js qui contient le code complet de entry2.js et jquery et contient sa propre exécution
• vendors.bundle.js qui contient le code complet de jquery et some_jquery_plugin et contient sa propre exécution

C'est évidemment mauvais parce que je vais potentiellement charge jquery 3 fois dans la page, donc nous ne voulons pas que.

Si je bundle avec CommonsChunkPlugin

Selon les arguments que je passe à l' CommonsChunkPlugin tout se passe ce qui suit:

• CAS 1 : Si je passe { name : 'commons' } je vais finir avec les groupes de fichiers suivants:

  • entry1.bundle.js qui contient le code complet de entry1.js, une exigence pour l' jquery et ne contient pas l'exécution
  • entry2.bundle.js qui contient le code complet de entry2.js, une exigence pour l' jquery et ne contient pas l'exécution
  • vendors.bundle.js qui contient le code complet de some_jquery_plugin, une exigence pour l' jquery et ne contient pas l'exécution
  • commons.bundle.js qui contient le code complet de jquery et contient le moteur d'exécution

  De cette façon, nous nous retrouvons avec quelques petits faisceaux global et le moteur d'exécution est contenue dans l' commons bundle. Plutôt ok, mais pas idéal.

• CAS 2 : Si je passe { name : 'vendors' } je vais finir avec les groupes de fichiers suivants:

  • entry1.bundle.js qui contient le code complet de entry1.js, une exigence pour l' jquery et ne contient pas l'exécution
  • entry2.bundle.js qui contient le code complet de entry2.js, une exigence pour l' jquery et ne contient pas l'exécution
  • vendors.bundle.js qui contient le code complet de jquery et some_jquery_plugin et contient le moteur d'exécution.

  De cette façon, encore une fois, nous nous retrouvons avec quelques petits faisceaux dans l'ensemble, mais l'exécution est maintenant contenue dans l' vendors bundle. C'est un peu pire que le cas précédent, puisque le moteur d'exécution est maintenant dans l' vendors bundle.

• CAS 3 : Si je passe { names : ['vendors', 'manifest'] } je vais finir avec les groupes de fichiers suivants:

  • entry1.bundle.js qui contient le code complet de entry1.js, une exigence pour l' jquery et ne contient pas l'exécution
  • entry2.bundle.js qui contient le code complet de entry2.js, une exigence pour l' jquery et ne contient pas l'exécution
  • vendors.bundle.js qui contient le code complet de jquery et some_jquery_plugin et ne contient pas l'exécution
  • manifest.bundle.js qui contient des exigences pour tous les autres bundle et contient le moteur d'exécution

  De cette façon, nous nous retrouvons avec quelques petits faisceaux global et le moteur d'exécution est contenue dans l' manifest bundle. C'est le cas idéal.

Ce que je ne comprends pas/je ne suis pas sûr de comprendre

• Dans le CAS 2 pourquoi avons-nous fini avec l' vendors bundle contenant à la fois le code commun (jquery) et ce qui restait de l' vendors participation (some_jquery_plugin)? De ma compréhension, ce que l' CommonsChunkPlugin n'était ici qu'il a réuni, le code commun (jquery), et depuis que nous avons forcé à la sortie de l' vendors bundle, il sorte de "fusionné" le code commun dans l' vendors bundle (qui ne contient que le code de l' some_jquery_plugin). Merci de confirmer ou de les expliquer.

• Dans le CAS 3 , je ne comprends pas ce qui s'est passé lorsque nous avons adopté { names : ['vendors', 'manifest'] } pour le plugin. Pourquoi/comment était l' vendors bundle gardé intacte, contenant à la fois jquery et some_jquery_plugin, lorsque jquery est clairement une commune de la dépendance, et pourquoi elle a été générée manifest.bundle.js fichier créé la façon dont il a été créé (exigeant que tous les autres faisceaux et contenant le moteur d'exécution) ?

Answer 1

C'est de cette façon l' CommonsChunkPlugin travaux.

D'un commun morceau "reçoit" les modules partagés par plusieurs entrée morceaux. Un bon exemple d'une configuration complexe, peut être trouvé dans le Webpack référentiel.

L' CommonsChunkPlugin est exécuté lors de l'optimisation de la phase de Webpack, ce qui signifie qu'il fonctionne en mémoire, juste avant les morceaux sont scellés et écrites sur le disque.

Lorsque plusieurs communes des morceaux sont définies, elles sont traitées dans l'ordre. Dans votre cas 3, c'est comme le fonctionnement du plugin à deux reprises. Mais s'il vous plaît noter que l' CommonsChunkPlugin peut avoir une configuration plus complexe (minSize, minChunks, etc) qui influe sur la façon dont les modules sont déplacés.

CAS 1:

1. Il y a 3 entry morceaux (entry1, entry2 et vendors).
2. La configuration définit l' commons bloc commun morceau.
3. Le plugin processus de l' commons commune de chunk (depuis le bloc n'existe pas, il est créé):
   1. Il recueille les modules qui sont utilisés plus d'une fois dans les autres morceaux: entry1, entry2 et vendors utilisation jquery de sorte que le module est retiré à partir de ces morceaux et est ajouté à l' commons bloc.
   2. L' commons bloc est signalé comme un entry morceau tandis que l' entry1, entry2 et vendors des morceaux sont décochée comme entry.
4. Enfin, depuis l' commons chunk est une entry chunk il contient le moteur d'exécution et l' jquery module.

CAS 2:

1. Il y a 3 entry morceaux (entry1, entry2 et vendors).
2. La configuration définit l' vendors bloc commun morceau.
3. Le plugin processus de l' vendors communes morceau:
   1. Il recueille les modules qui sont utilisés plus d'une fois dans les autres morceaux: entry1 et entry2 utilisation jquery de sorte que le module est retiré à partir de ces morceaux (notez qu'il n'est pas ajouté à l' vendors coup, c'est l' vendors bloc contient déjà).
   2. L' vendors bloc est signalé comme un entry morceau tandis que l' entry1 et entry2 des morceaux sont décochée comme entry.
4. Enfin, depuis l' vendors chunk est une entry morceau, il contient le moteur d'exécution et l' jquery/jquery_plugin modules.

CAS 3:

1. Il y a 3 entry morceaux (entry1, entry2 et vendors).
2. La configuration définit l' vendors bloc et l' manifest morceau comme le commun des morceaux.
3. Le plugin crée l' manifest morceau comme il n'existe pas.
4. Le plugin processus de l' vendors communes morceau:
   1. Il recueille les modules qui sont utilisés plus d'une fois dans les autres morceaux: entry1 et entry2 utilisation jquery de sorte que le module est retiré à partir de ces morceaux (notez qu'il n'est pas ajouté à l' vendors coup, c'est l' vendors bloc contient déjà).
   2. L' vendors bloc est signalé comme un entry morceau tandis que l' entry1 et entry2 des morceaux sont décochée comme entry.
5. Le plugin processus de l' manifest commune de chunk (depuis le bloc n'existe pas, il est créé):
   1. Il recueille les modules qui sont utilisés plus d'une fois dans les autres morceaux: comme il n'y a pas de modules utilisés plus d'une fois, aucun module n'est déplacé.
   2. L' manifest bloc est marqué comme entry morceau tandis que l' entry1, entry2 et vendors sont décochée comme entry.
6. Enfin, depuis l' manifest chunk est une entry chunk il contient le moteur d'exécution.

Espérons que cela aide.