Pourquoi la dépendance est-elle répétée plusieurs fois dans l'artefact Webpack?

Question

J'ai un build webpack à plusieurs entrées et je travaille sur l'optimisation de la taille des artefacts pour la production. webpack-bundle-analyzer produit l'image suivante:

Il est évident que les AtlasKit dépendances constituent un énorme morceau de la taille d'artefact totale. Plus précisément, je vois que styled-components.es.js est répété plusieurs fois. Plus encore, cette même dépendance est également présente dans vendor.js qui est elle-même partagée par tous les autres paquets.

Quelqu'un peut-il expliquer pourquoi styled-components.es.js est répété partout et pourquoi il ne peut pas être partagé par une seule dépendance dans vendor.js? Y at-il quelque chose que je peux faire pour supprimer les doublons et ne dépend que de la dépendance styled-components.es.js unique dans vendor.js?

J'ai trouvé un peu étrange que les dépendances AtlasKit aient un dossier node_modules imbriqué inclus dans le package. Pourquoi dist ne suffit pas? Peut-être que cela fait partie de la raison pour laquelle styled-components.es.js ne peut pas être partagée via vendor.js?

J'ai essayé d'exclure la dépendance manuellement via IgnorePlugin de webpack (similaire à moment.js locales), mais a échoué jusqu'à présent de le faire.

Toute idée serait grandement appréciée. Merci!

Answer 1

Il semble que vous souhaitiez consolider une dépendance à partir de plusieurs blocs en un bloc commun: Pour cela, je recommande d'examiner webpack.CommonsChunkPlugin.

un intérêt particulier est la propriété minChunks vous pouvez passer au plug-in:

minChunks: Numéro | Infinity | fonction (module, compte) -> booléen, // Le nombre minimum de morceaux qui ont besoin contenir un module avant qu'il ne soit déplacé dans le bloc des communs. // Le nombre doit être supérieur ou égal à 2 et inférieur ou égal au nombre de blocs. // Le passage Infinity crée simplement le bloc des communs, mais n'y déplace aucun module. // En fournissant un function, vous pouvez ajouter une logique personnalisée. (Par défaut, le nombre de morceaux)

Je vous conseille d'essayer d'ajouter ce plugin à votre config Webpack:

new webpack.optimize.CommonsChunkPlugin({ 
    children: true, 
    async: true, 
    minChunks: 3 
}) 

Cette utilisation est décrite plus loin dans "Extra async commons chunk".

Si vous souhaitez voir la quantité de code partagée entre vos blocs, essayez également samccone/bundle-buddy pour Webpack.

Si vous utilisez déjà CommonsChunkPlugin, je devrais voir votre config Webpack pour fournir plus d'informations.