Webpack捆绑分析器“+ n个模块”

Question

我想了解我的角度代码是如何捆绑的以及哪些块文件。因此我正在使用“Webpack捆绑分析器”。对于某些模块，它在报告中写为：router.js + "12 Modules"。

如何确定12 Modules的内容？我点击了该行并没有帮助。

Answer 1

在webpack捆绑分析器用户界面中，有一个复选框，您可以在其中显示级联模块的内容。如果选中该框，则会看到其中的内容。

这是UI的外观，您可以在其中切换设置：

这是未选中的框的外观：

以下是带有复选框的外观：

Answer 2

听起来您正在使用ModuleConcatenationPlugin，请尝试将其评论出来。它是可以掩盖这一点的插件之一。以下是more details和defect logged。

Answer 3

类似于Philipp Feigl的建议here，我修改了Angular 7 cli项目的package.json。

我的应用程序名为 playpen ，因此请调整stats.json文件在捆绑报告目标上的位置。

因此dist / 游戏围栏 /stats.json应该是dist / {YOURAPP} /stats.json

{
  "name": "playpen",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "bundle-report": "ng build --prod --stats-json --build-optimizer=false --vendor-chunk=true --named-chunks=true --output-hashing=media && webpack-bundle-analyzer dist/playpen/stats.json"
  },