Webpack 包分析器“+ n 模块”

Question

我想了解我的 angular 代码是如何捆绑的以及捆绑到哪些块文件中。因此我使用 "Webpack bundle analyzer"。对于某些模块，它在报告中写为：router.js + "12 Modules".

如何确定12 Modules的内容？我点击了这条线，但没有帮助。

Answer 1

听起来您正在使用 ModuleConcatenationPlugin, try commenting it out. It's one of the plugins that can obscure this. Here are more details and the defect logged。

Answer 2

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

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

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

Answer 3

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

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

这是没有复选框的样子：

下面是它的样子WITH 复选框：

Webpack 包分析器“+ n 模块”

Webpack bundle analyzer "+ n Modules"

webpack

angular

webpack-bundle-analyzer