什么是common.chunk.js？

Question

我有一个Angular 5应用程序，使用angular-cli 1.6.6运行，当捆绑我的应用程序时，我（在所有其他人中）有一个 common.chunk.js 。

你知道它是什么吗？它与我的任何模块都不匹配，它也不是供应商或主要或 polyfill ，因为它们有专用的块。< / p>

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来扩大您的开发依赖项。

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

禁用它