什么是common.chunk.js？

Question

我有一个Angular 5应用程序,运行angular-cli 1.6.6,当捆绑我的应用程序时,我(在所有其他人中)有一个common.chunk.js.

你知道这是什么吗？它与我的任何模块都不匹配,它也不是供应商或主要或polyfill,因为它们有专用的块.

Answer 1

公共块是多个功能模块使用的所有内容的地方.

假设您在自定义grid模块中有自定义网格组件.然后你把这个网格模块到您user和admin功能模块.由于该grid模块用于多个功能模块,因此Webpack将其缝合到common.chunk其他功能模块所依赖的模块中.

如果在关闭块命名--named-chunks false的情况下运行构建(- 在--prod构建中默认使用),则common.chunk变为0.chunk- 在任何其他惰性块之前必须加载的第0个块.

这样做的一个缺点是,如果你的应用程序中有很多小的懒惰模块(我认为这是从屏幕截图判断的情况),那么common.chunk将会开始变得特别快.假设你的两个懒惰模块使用了一些很棒的(但是胖乎乎的)图表库.图表库中的所有树形代码都将最终出现在common.chunk.即使其他惰性模块不使用任何一堆图表代码,它们仍然依赖于common.chunk并将加载并执行它们不需要的所有图表代码.

要查看它是什么,您可以使用它webpack-bundle-analyzer来检查已构建块的内部.您既可以使用npm i --D它,也可以使用npx不会破坏您的dev依赖项.

ng build --prod --stats-json && npx webpack-bundle-analyzer dist/stats.json

希望这有所帮助 :-)

Answer 2

显然它是 webpack 公共块https://webpack.js.org/plugins/commons-chunk-plugin/

它可以被禁用--no-common-chunk