Alguém pode explicar o CommonsChunkPlugin do Webpack

Eu entendo a essência geral de que oCommonsChunkPlugin examina todos os pontos de entrada, verifica se há pacotes / dependências comuns entre eles e os separa em seu próprio pacote.

Então, vamos assumir que tenho a seguinte configuração:

...
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'
}
...
Se eu agrupar sem usarCommonsChunkPlugin

Terminarei com três novos arquivos de pacote configurável:

entry1.bundle.js que contém o código completo deentry1.js ejquery e contém seu próprio tempo de execuçãoentry2.bundle.js que contém o código completo deentry2.js ejquery e contém seu próprio tempo de execuçãovendors.bundle.js que contém o código completo dejquery esome_jquery_plugin e contém seu próprio tempo de execução

Isso é obviamente ruim, porque eu potencialmente carregareijquery 3 vezes na página, por isso não queremos isso.

Se eu agrupar usandoCommonsChunkPlugin

Dependendo de quais argumentos eu passo paraCommonsChunkPlugin ocorrerá qualquer um dos seguintes:

CASO 1 : Se eu passar{ name : 'commons' } Terminarei com os seguintes arquivos de pacote configurável:

entry1.bundle.js que contém o código completo deentry1.js, um requisito parajq,uery e não contém o tempo de execuçãoentry2.bundle.js que contém o código completo deentry2.js, um requisito parajquery e não contém o tempo de execuçãovendors.bundle.js que contém o código completo desome_jquery_plugin, um requisito parajquery e não contém o tempo de execuçãocommons.bundle.js que contém o código completo dejquery e contém o tempo de execução

Dessa forma, acabamos com alguns pacotes menores em geral e o tempo de execução está contido nocommons agrupar. Bastante ok, mas não ideal.

CASO 2: Se eu passar{ name : 'vendors' } Terminarei com os seguintes arquivos de pacote configurável:

entry1.bundle.js que contém o código completo deentry1.js, um requisito parajquery e não contém o tempo de execuçãoentry2.bundle.js que contém o código completo deentry2.js, um requisito parajquery e não contém o tempo de execuçãovendors.bundle.js que contém o código completo dejquery esome_jquery_plugin e contém o tempo de execução.

Dessa forma, novamente, acabamos com alguns pacotes menores em geral, mas o tempo de execução agora está contido novendors agrupar. É um pouco pior que o caso anterior, já que o tempo de execução está agora novendors agrupar.

CASO 3: Se eu passar{ names : ['vendors', 'manifest'] } Terminarei com os seguintes arquivos de pacote configurável:

entry1.bundle.js que contém o código completo deentry1.js, um requisito parajquery e não contém o tempo de execuçãoentry2.bundle.js que contém o código completo deentry2.js, um requisito parajquery e não contém o tempo de execuçãovendors.bundle.js que contém o código completo dejquery esome_jquery_plugin e não contém o tempo de execuçãomanifest.bundle.js que contém requisitos para todos os outros pacotes configuráveis e contém o tempo de execução

Dessa forma, acabamos com alguns pacotes menores em geral e o tempo de execução está contido nomanifest agrupar. Este é o caso ideal.

O que eu não entendo / Não sei se entendi

NoCASO 2 por que acabamos com ovendors pacote contendo o código comum (jquery) e o que restou dovendors entrada (some_jquery_plugin)? Pelo meu entendimento, o que oCommonsChunkPlugin O que fizemos aqui foi que ele reuniu o código comum (jquery), e como forçamos a saída para o arquivovendors pacote, ele meio que "mesclou" o código comum novendors pacote (que agora continha apenas o código desome_jquery_plugin)Por favor, confirme ou explique.

NoCASO 3 Eu não entendo o que aconteceu quando passamos{ names : ['vendors', 'manifest'] } para o plugin. Por que / como foi ovendors pacote mantido intacto, contendo ambosjquery esome_jquery_plugin, quandojquery é claramente uma dependência comum e por que a geraçãomanifest.bundle.js arquivo criado da maneira como foi criado (exigindo todos os outros pacotes configuráveis e contendo o tempo de execução)?

questionAnswers(1)

yourAnswerToTheQuestion