Just shows stat size

[felipefialho]

Issue description

I was using webpack-bundle-analyzer normally, but in last times, the result just shows stat size and no more gzip size and parsed size.

Technical info

• Webpack Bundle Analyzer version: 2.9.1
• Webpack version: 3.10.0
• Node.js version: 6.10.2
• npm version: 5.6.0
• OS: macOS HighSierra

Debug info

How do you use this module? As CLI utility or as plugin? As CLI utility

If CLI, what command was used? webpack-bundle-analyzer dist/stats.json

If plugin, what options were provided? No

What other Webpack plugins were used? angular-cli 1.6.0

stats.json.zip

[th0r]

What is shown in the console?

[th0r]

Can you run it in normal terminal console and it should show you the reason you see only stats sizes?

Something like this:

$ webpack-bundle-analyzer ./stats.4.json

Couldn't parse bundle asset "./0.cf5935348d8d6e1568f4.chunk.js".
Analyzer will use module sizes from stats file.

Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it

[felipefialho]

Ahhhh, it's true

Couldn't parse bundle asset "scripts.59de71cec066f973cfec.bundle.js".
Analyzer will use module sizes from stats file.

Do you have any idea? haha

[th0r]

Do you have scripts.59de71cec066f973cfec.bundle.js file in that folder?

[felipefialho]

Yes! I have an error on file.

The problem is because has an error on picturefill lib, I'll investigate it. Thanks!

[valscion]

This seems to be a common issue people have -- maybe we could make the parsing error text pop out in a much more visible way..?

Just thinking out loud. Improving logging and errors is something I'd love to help make happen after I get the v3 done 😊

[felipefialho]

@valscion I agree 😄

[FDIM]

I had similar issue to this. For some reason it fails to parse scripts.[hash].bundle.js and doesn't show gzip or parsed sizes for any other module. Doing little cleanup instats.json (removing the file reference) made it work properly - I am able to see the sizes.

@th0r maybe the error could be handled on per bundle basis?

[zbuhler]

I was having this problem as well and it appears it is due to the fact that script.[hash].bundle.js is not a true webpack bundle/chunk. The CLI seems to just concatenate the files you specify in the .angular-cli.json into a chunk of js. Excluding it from the stats.json file does seem to let the other modules work correctly as @FDIM suggested. I looked for the ability to exclude the scripts bundle from the command line but seems to be only available when using their webpack plugin.

So seems like options at this point are to manually (or create a post-build script) to remove the scripts bundle information or not use the scripts and set up your own equivalent as a separate bundle? It's too bad that this is the case because it is helpful to be able to know how big that chunk is. It seems like if you don't care about the gzip size etc you can still sort of see it as the script bundle seems to be included in the main bundle?

[valscion]

Any chance of creating a zip of your bundle dir contents and stats.json? We might be able to do something about your situation, @zbuhler

[florian-bd]

I got the same problem after upgrading to webpack 4. I am not using any angular.cli

[valscion]

Please open a new issue folks! It would help a lot in figuring out what is broken!

[zbuhler]

@valscion I can upload my bundle dir and stats but first I thought I'd let you know I created a fresh Angular CLI project to see if I can narrow down the problem. I added jquery (just as a test) in my scripts array in my .angular-cli.json

"scripts": [
    "./scripts/jquery-3.3.1.min.js"
 ],

Which generates a scripts.[hash].bundle.js in my bundle dir. Like I mentioned above the src of that file does not have webpack anything in it. It just has jquery in it and nothing more.

If I open any other bundle that is generated such as main.[hash].bundle.js it begins with webpackJsonp(...

It appears to me that the analyzer chokes on chunks whose code isn't wrapped in a webpack function?

The relevant parts of my stats.json that I remove are-

  "assetsByChunkName": {
    "inline": "inline.86cf029305c934704a61.bundle.js",
    "main": "main.66983cb30db00a1c5598.bundle.js",
    "polyfills": "polyfills.dc963f90580f1044b785.bundle.js",
    "styles": "styles.9c0ad738f18adc3d19ed.bundle.css",
-   "scripts": "scripts.d464be456471b1b5f048.bundle.js"
  }

and

-{
-  "name": "scripts.d464be456471b1b5f048.bundle.js",
-  "size": 158555,
-  "chunks": [
-    "scripts"
-  ],
-  "chunkNames": [
-    "scripts"
-  ],
-  "emitted": true
-},

Which effectively excludes that chunk from being analyzed.

In any case where do we go from here? Knowing this do you still want me to upload a zip of my dist folder? If you do want me to does it matter where I upload it? Does this warrant a new issue or were you referencing the webpack 4 issue when asking for a new issue to be created? I feel like my particular issue is more of an Angular CLI specific problem and not really anything to do with the analyzer project. I do have a couple of ideas though that seem to be within the scope of this project-

1. We could enhance the options for the CLI version of webpack-bundle-analyzer to be able to take in a json configuration that would allow you to exclude bundles you don't want to be analyzed similar to how the webpack plugin lets you. That seems to be a decent option as it is still framework agnostic and let's me to what I need to do. All it would be really is making the command line options as similar as possible to the webpack plugin way of doing things (aka you can pass the same information). If you are interested I could look into a pull request for that.

2. If we had the above solution all that would do is exclude it from being analyzed but it would still be nice to know the size of that file/chunk. Perhaps there could be something similar to a try/catch. The analyzer would try to parse the bundle but if it can't it uses the module size from the stats file for only that file without making it so all the other modules also go from the stats file. So in the web view you'd still see the script chunk with just the "State size:" but the other ones would show gzip size etc. Hopefully that makes sense. It seems that if the analyzer can't parse any one chunk it forces all chunks to go off the stats.json which it would be nice that it would just show what it can for each module. Also, it does bring up the question should it matter that it can't parse the chunk as a webpack bundle? Could it just treat it as such and still gzip? I suppose the parsing is important so you know what makes up the bundle and not just the size itself. If that's the case, maybe option one is still the best.

I'm probably missing something obvious but those are ideas/solutions that occur to me at this time. Let me know how I can help.

[valscion]

Thanks for the extensive comment, @zbuhler! Now I finally understand how the interplay with angular-cli works 😄

A new issue specifically for your case would be great! It could be focused specifically on Angular CLI + scripts interplay, and contain the details you outlined in your comment. Maybe it could be titled "Angular CLI with scripts forces displaying of only stat size"?

I'm not yet sure what the solution would be. I'd be inclined to not add any new configuration options or flags, if at all possible. It could be interesting to see if we could somehow avoid one rogue bundle (the jquery script in your example) causing all the other bundles to fail parsing, too.

I can upload my bundle dir and stats but first I thought I'd let you know I created a fresh Angular CLI project to see if I can narrow down the problem. I added jquery (just as a test) in my scripts array in my .angular-cli.json

Oh so nice! If you could whip up a reproduction repository for this minimal case, that would make it even better! It would be nice if you could also commit the built files to that repository directly, so we wouldn't even need to do any zipping 😛

[zbuhler]

Thanks for the feedback! Per your suggestions I created an issue and a sample repo to go with it.

[jeron-diovis]

Just ran into this issue using analyzer with webpack-dev-server. No angular or things like this.

The problem is that analyzer uses physical files to calc parsed/gzipped sizes – while webpack-dev-server keeps everything in memory.

Second problem is that being used as plugin, analyzer shows no errors, while CLI tools says Couldn't parse bundle asset.

As I understand, there is nothing analyzer can do with webpack-dev-server, but maybe it's worth to explicitly mention in docs that you should have files on disc to get parsed/gzipped info?

[Macil]

I was using webpack with gulp and compiler.outputFileSystem = new MemoryFS(); so that webpack wouldn't write the bundles itself, so I ran into the same issue as @jeron-diovis. The BundleAnalyzerPlugin didn't report any errors at all in the console, just silently produced stat-sized-only reports. I had to use webpack-bundle-analyzer on the command line on the profile json in order to see any kind of error message, which I only thought to do because of this thread.

[valscion]

Thanks for the comments @jeron-diovis and @agentme! I opened a new issue related to documenting this surprising behavior, see #191

I'll lock this issue now as it is getting difficult to parse this thread where there are multiple issues.

Please open a new issue if you think there's something wrong or something needs to be fixed.