Webpack - Fusion de faisceaux fractionnés

Question

J'ai un gros fichier JS groupé qui contient des scripts pouvant s'exécuter à la fin du chargement de la page.

En d'autres termes - je voulais réduire la taille du premier fichier JS téléchargé par plusieurs points d'entrée

J'ai donc créé deux points d'entrée:

module.exports = { 
    entry: { 
     a: "./scripts/entry.js", 
     b: "./scripts/windowEvents.js" 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin("common.js") 
    ], 


    output: { 
     path: path.join(__dirname, '/scripts/bundle'), 
     filename: "[name].entry.js" 
    }, 

    module: { 
     loaders: [ 
     ] 
    } 
}; 

Alors maintenant, j'ai:

• a.entry.js
• b.entry.js
• common.js .entry.js

Et mon fichier HTML ressemble à:

<script src="/scripts/bundle/common.js.entry.js"></script> 
<script src="/scripts/bundle/a.entry.js"></script> 

//Html renders fast 

//bottom page script 
<script src="/scripts/bundle/b.entry.js"></script> 

Mais voici le problème:

Les deux premières sections de scripts fait 2 requêtes au serveur. Je ne veux pas que

Question:

Comment puis-je fusionner les deux premiers faisceaux en un seul paquet, il y aura une seule demande? En d'autres termes, je veux fusionner a.entry.js & common.js.

Quelque chose comme ça:

<script src="/scripts/bundle/Common_AND_Entry_a.js"></script> 

//Html renders fast 

//bottom page script 
<script src="/scripts/bundle/b.entry.js"></script> 

Answer 1

Vous pouvez donner le CommonsChunkPlugin le nom d'un morceau existant et il ajoutera à qu'au lieu de créer un nouveau fichier. Donc, dans votre cas, il obtiendrait le nom a (comme le montre Explicit vendor chunk):

plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "a" 
    }) 
], 

Si vous souhaitez modifier le nom du fichier de sortie aussi bien, vous pouvez le faire avec l'option filename, qui accepte les mêmes caractères génériques que output.filename. Ce qui suit produit common_and_a.js et b.entry.js:

plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "a", 
     filename: "common_and_[name].js" 

    }) 
], 

Pour toutes les options disponibles, voir CommonsChunkPlugin - Options