Qu'est-ce que common.chunk.js?
J'ai une application Angular 5, fonctionnant avec angular-cli 1.6.6, lorsque je regroupe mon application, j'ai (parmi toutes les autres) une commune. chunk.js .
Tu sais ce que c'est? Il ne correspond à aucun de mes modules, ce n'est pas non plus le fournisseur ou le principal ou le polyfill car ils ont leur bloc dédié.
Le bloc commun est un endroit pour toutes les choses que plus d'un de vos modules fonctionnels utilisent.
Supposons que vous ayez un composant de grille personnalisé dans un module grid personnalisé. Vous importez ensuite ce module de grille dans vos modules d'entités user et admin. Étant donné que le module grid est utilisé dans plusieurs modules de fonctions, Webpack le coud dans un common.chunk dont dépendent les autres modules fonctionnels.
Si vous exécutez la génération avec un nom de bloc désactivé (--named-chunks false - utilisé par défaut dans --prod builds), le common.chunk devient 0.chunk - le morceau de zeroth qui doit être chargé avant tout autre morceau paresseux.
Un inconvénient est que si vous avez beaucoup de petits modules paresseux dans votre application (ce qui, je pense, est le cas à en juger par la capture d'écran), le common.chunk commencera à se gonfler particulièrement rapidement. Supposons que deux de vos modules paresseux utilisent une bibliothèque de graphiques impressionnante (mais joufflue). Tout le code arborescent de la bibliothèque de graphiques se retrouvera dans le common.chunk. Même si les autres modules paresseux n'utilisent aucune de ces piles de code de graphique, ils dépendent quand même du common.chunk et chargera et exécutera tout le code des graphiques dont ils n'ont pas besoin.
Pour voir ce qui est quoi, vous pouvez utiliser le webpack-bundle-analyzer pour inspecter l'intérieur de vos morceaux construits. Tu peux soit npm i --D it ou utilisez npx pour ne pas alourdir vos dépendances de développement.
ng build --prod --stats-json && npx webpack-bundle-analyzer dist/stats.json
Espérons que cela aide un peu :-)