Webpack bundle analyzer "+ n Modules"

Question

I would like to learn how my angular code is bundled and to which chunk files. Therefore I'm using "Webpack bundle analyzer". For some modules it's written in the report as: router.js + "12 Modules".

How can I determine the contents of the 12 Modules? I clicked on the line and it didn't help.

score 64 · Accepted Answer · answered Jun 18 '19 at 19:56

64

In the webpack bundle analyzer UI, there is a checkbox where you can show the contents of concatenated modules. If you check that box, you will see the contents.

Here is what the UI looks like, where you can toggle the setting:

Here is what it looks like without the box checked:

Here is what it looks like WITH the box checked:

answered Jun 18 '19 at 19:56

frosty

21,036
7
52
74

@Omtechguy I hope this helps. – frosty Jun 18 '19 at 19:58
I don't see this checkbox in my analyzer, is it a specific version? – Technotronic May 14 '20 at 13:32
Whatever was the latest on Jun 18, 2019. – frosty May 14 '20 at 17:10
1

Noticed after asking that if module concatenation is off then I don't see the checkbox :) If concatenation is on the checkbox is there. – Technotronic May 18 '20 at 11:42

score 3 · Answer 2 · answered Feb 18 '18 at 18:14

3

Sounds like you are using the ModuleConcatenationPlugin, try commenting it out. It's one of the plugins that can obscure this. Here are more details and the defect logged.

answered Feb 18 '18 at 18:14

olore

4,687
3
28
40

score 1 · Answer 3 · answered Oct 13 '22 at 16:35

1

Webpack now supports turning off module concatenation:

// webpack.config.js

module.exports = {
  //...
  optimization: {
    concatenateModules: false,
  },
};

https://webpack.js.org/configuration/optimization/#optimizationconcatenatemodules

answered Oct 13 '22 at 16:35

frodo2975

10,340
3
34
41

rjdkolb · Answer 4 · 2019-01-08T10:23:01.060

Similar to what Philipp Feigl suggested here, I modified my package.json of my Angular 7 cli project.

My application is called playpen, so adjust the location of the stats.json file on your bundle-report target.

So dist/playpen/stats.json should be 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"
  },

Webpack bundle analyzer "+ n Modules"

4 Answers4