angular - Webpack 包分析器“+ n 模块”

Question

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

我怎样才能确定的内容12 Modules？我点击了线路，它没有帮助。

Answer 1

在 webpack 包分析器 UI 中，有一个复选框，您可以在其中显示串联模块的内容。如果选中该框，您将看到内容。

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

这是没有选中该框的样子：

这是选中该框的样子：

Answer 2

听起来您正在使用ModuleConcatenationPlugin，请尝试将其注释掉。这是可以掩盖这一点的插件之一。这里有更多细节和记录的缺陷。

Answer 3

与Philipp Feigl在这里建议的类似，我修改了 Angular 7 cli 项目的 package.json。

我的应用程序名为playpen，因此请调整 stats.json 文件在bundle-report目标上的位置。

所以 dist/ playpen /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"
  },