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çãoIsso é obviamente ruim, porque eu potencialmente carregareijquery
3 vezes na página, por isso não queremos isso.
CommonsChunkPlugin
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çãoDessa 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çãoDessa forma, acabamos com alguns pacotes menores em geral e o tempo de execução está contido nomanifest
agrupar. Este é o caso ideal.
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)?