Posted in Uncategorized

Show your modules tree

   February 23, 2021  13 Comments on Show your modules tree

Just for entertainment:

  1. Compile with webpack --profile --json > stats.json

    (node.js API: { profile: true } and stats.toJson())

  2. Go to http://webpack.github.io/analyse/#modules
  3. Load your stats file (It’s not uploaded, the analyse tools is a client only tool).
  4. Wait a bit until the graph has been stabilized.
  5. Screenshot and cut the graph area.
  6. Post it into this thread.

These are the webpack test cases:
image

React:
image

Author: Fantashit

13 thoughts on “Show your modules tree”

  1. @sokra I get this error when I load my stats.json after CSS optimization (the optimization causes the stats.json to become invalid):

    Uncaught SyntaxError: Unexpected token St.onload @ 8.970b70af1d8094b96211.js:1

    Thoughts?

  2. @SilentCicero : I had the same problem. I discovered that my process was dumping junk into the same file with the JSON, so it wasn’t producing valid JSON. I manually edited my file, then used a JSON parser to validate it. After that, it worked great.

  3. I am imagining the same visualization from a VR. Wherein user can shrink the and expand the dots using hand gestures. Just like tony stark in Iron man movie.

  7. I was playing with this, and wondering if I could do a bit more with it, so built this converter from stats.json to GDF so I could open it in Gephi. It’ll allow you to delete nodes you don’t care about, etc. so you can look at things in more detail. Currently doesn’t export that much information, but open to suggestions on further things to export. Fun to play with either way 🙂

  8. Alright, wanted to make something prettier before I commented…

    Modules colored by chunks, and sized according to module size.
    modules

    Filtering the modules down to only those in the common chunk.
    common_chunk

    I can see from these that we have a few rather large dependencies (jquery is one) and that the common bundle has a larger one that’s kind of loosely connected and can potentially be removed from page load a majority of the time… 🙌

    Different arrangement…
    modules_openord

  10. I hit “choose file” and it selects, but then nothing happens. I don’t get a next button or any progress. My stats file is around 12mb. Is this tool still working?

    Edit: I checked the console log on the page and saw a syntax error in the json. If you do ANY console logging from your webpack setup or plugins, this breaks. I was able to edit the stats json file to trim off my console logs and it worked.

    duh

  12. I’m having a lot of trouble getting https://webpack.github.io/analyse/ to analyze my stats.json file.
    I keep getting this error:
    screen shot 2018-10-23 at 16 25 20

    Considering the comment above, I have to ask wether this tool is updated?
    Otherwise, I may of course be wrong. Here’s what I do in my build.js script (webpack 3.8.1):

    let compiler = webpack({ ...config, stats: 'verbose' });
  return new Promise((resolve, reject) => {
    compiler.run((err, stats) => {
      if (err) {
        return reject(err);
      }
      fs.writeFileSync(
        './stats.json',
        JSON.stringify(stats.toJson('verbose'), null, 2)
      );
      ...

Comments are closed.