Not seeing parsed or gzip statistics, stat size only

Question

Not seeing parsed or gzip statistics, stat size only

MrHavard opened this issue 7 years ago · 30 comments

Issue description

I'm seeing stat size, but not parsed or gzip information. Is there something special that needs to be configured to see those for a production build? Would this need to be configured elsewhere in webpack stats configuration or within webpack-bundle-analyzer?

Technical info

Webpack Bundle Analyzer version: 2.8.2
Webpack version: 2.6.1
Node.js version: 6.10.1
npm/yarn version: 4.4.4
OS: Windows 10

Debug info

Using as a webpack plugin with the following settings:

new BundleAnalyzerPlugin({analyzerHost: 'localhost'});

What other Webpack plugins were used?
uglify, html-webpack-plugin, extract-text-webpack-plugin

Answer 1 · 2017-06-07T03:22:45.000Z

I met the same problem, look forward to a reply.

Answer 2 · 2017-06-07T06:59:13.000Z

Hi, thanks for raising an issue! Seeing only stat sizes usually means that webpack-bundle-analyzer is not able to get access to your compiled bundles for some reason.

Do either of you get any error message logged to the console? For example, something like this?

Couldn't parse bundle asset "dist\version\1493729489528\js\app.js".
Analyzer will use module sizes from stats file

There could be a bug where webpack-bundle-analyzer is not able to parse your bundle assets, or it might not found the bundled JS files for some reason.

Are you able to create a stats.json with passing generateStatsFile: true setting to new BundleAnalyzerPlugin and then ZIP that and your compiled JS files over for me to check this out? If you don't want your source code to be posted in public, feel free to send the ZIP file over to me via email. My email address is visible in my GitHub profile.

Answer 3 · 2017-06-07T15:12:24.000Z

I do not get any error or messages other than that Webpack Bundle Analyzer saved stats file and that it is started. Due to security I am unable to provide a stats file or source code.

I can tell you the general structure of bundled output:

dist
-- index.html
-- assets
--- js
---- app.js
---- app.js.map
--- css
---- app.css
---- app.css.map

Is there anything specifically I should be looking for in the stats file that might be missing or an indicator that something is wrong?

Answer 4 · 2017-06-08T06:10:56.000Z

Could you try applying generateStatsFile: true to your new BundleAnalyzerPlugin setup and posting the entire file structure of your bundle directory?

Please follow these steps to generate a full tree of your bundle directory:

Select your bundle output folder.
Press Shift, right-click mouse, and select "Open command window here".
Type tree /f /a | clip and press Enter.

You should now have the file tree in your clipboard. Could you paste it here?

Answer 5 · 2017-06-08T06:19:51.000Z

dist
|   index.html
|   stats.json
|   
\---assets
    +---css
    |       app.3c5d4b10.css
    |       app.3c5d4b10.css.map
    |       
    +---fonts
    |       fontawesome-webfont.674f50d2.eot
    |       fontawesome-webfont.af7ae505.woff2
    |       fontawesome-webfont.b06871f2.ttf
    |       fontawesome-webfont.b8e85624.svg
    |       fontawesome-webfont.fee66e71.woff
    |       
    +---images
    |       fontawesome-webfont.912ec66d.svg
    |       
    \---js
            app.3c5d4b10.js
            app.3c5d4b10.js.map
            external.eaefbbfe.js
            external.eaefbbfe.js.map

Answer 6 · 2017-06-08T06:28:49.000Z

Thanks!

Things should work OK, I wonder what's up with webpack-bundle-analyzer not showing parsed and gzip sizes...

Could you try adding statsOptions: { source: false } alongside the generateStatsFile: true option to new BundleAnalyzerPlugin setup and zip over the stats.json file here?

You could double-check that it doesn't contain your source codes before that, though — with statsOptions: { source: false } option, the stats.json should not contain any of your sources but it isn't a bad idea to doublecheck if you're not able to send the sources ☺️

Could you also show me what the value of output.path is in your webpack config file?

Answer 7 · 2017-06-08T06:59:24.000Z

output: path.join(process.cwd(), 'dist'),

stats.zip

Answer 8 · 2017-06-08T07:37:26.000Z

I am unfortunately unable to replicate this error without your bundled files. I tried creating a reproduction case and even ran it in a Windows 10 virtual machine (I'm developing on macOS), and it still works.

Could you try running webpack-bundle-analyzer via the CLI?

node .\node_modules\.bin\webpack-bundle-analyzer dist\stats.json

Does this still only give you the stat sizes?

Answer 9 · 2017-06-08T15:13:27.000Z

There must be something wrong somewhere else in my configuration outside of the analyzer. If I attempt to run the CLI from a local install I get

C:\myco\workspaces\web\customer-ui\node_modules\.bin\webpack-bundle-analyzer:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^
SyntaxError: missing ) after argument list
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:393:7)
    at startup (bootstrap_node.js:150:9)

If I install the analyzer globally then the CLI works fine and I get all three stats correctly.

Running this instead from the local project works correctly as well:

node .\node_modules\webpack-bundle-analyzer\lib\bin\analyzer.js dist\stats.json

Answer 10 · 2017-06-09T07:26:23.000Z

There must be something wrong somewhere else in my configuration outside of the analyzer. If I attempt to run the CLI from a local install I get

Ah yes, I think it is due to npm installing binaries on Windows wrapped in .cmd files, and I didn't know that. Instead of me asking you to call this:

node .\node_modules\.bin\webpack-bundle-analyzer dist\stats.json

...I should've asked you to try this instead:

.\node_modules\.bin\webpack-bundle-analyzer dist\stats.json

There seems to be lots of issues about this behavior when googling, and I even found one similar case in rimraf repository here: isaacs/rimraf#107 and isaacs gave a nice explanation of this case in here: dougludlow/ng2-bs3-modal#47

Does it work without a global installation of the analyzer if you try calling the node_modules\.bin\webpack-bundle-analyzer without first calling node?

Answer 11 · 2017-06-09T07:45:20.000Z

Seeing as the global installation works, there might be some problems with how the plugin works on your machine. There might be some conflict with another plugin or config setting that I just haven't heard of before.

Are you able to modify the node_modules/webpack-bundle-analyzer/lib/BundleAnalyzerPlugin.js file and add a console.log to the second argument passed to viewer.startServer (the options object) and tell me what it outputs for you? Especially the this.getBundleDirFromCompiler() output is interesting, as if that is null or falsy, we won't ever even try to parse the compiled files and thus will never get to showing gzip nor parsed sizes.

Also have you at some point ever got a report that worked with an older version of the plugin before? Could you try the plugin with version 2.7.0 of webpack-bundle-analyzer?

Answer 12 · 2017-06-09T15:56:19.000Z

@valscion
I get the same when i switch WBA to new BundleAnalyzerPlugin({ analyzerMode: 'static' })and suddenly the only option left is stat. It served the other options fine in server mode.

Answer 13 · 2017-06-09T16:35:12.000Z

bundleDir appears to be null:

{ 
  openBrowser: true,
  host: 'localhost',
  port: 8888,
  bundleDir: null,
  logger: Logger { activeLevels: Set { 'info', 'warn', 'error', 'silent' } },
  defaultSizes: 'parsed' 
}

UPDATE: I tried a few variations and it appears that regardless of whether I am running webpack-dev-server or generating a production build this.compiler.outputFileSystem.constructor.name is always going to be MemoryFileSystem resulting in bundleDir being null and not producing parsed or gzip stats.

Answer 14 · 2017-06-12T06:41:37.000Z

@drcmda could you open a separate issue for your problem?

@MrHavard thank you for the analysis! This is what I feared was happening. Would you be able to create a minimal reproduction repository for this issue? I'm not really sure why this is happening, but it would be amazing to be able to replicate it myself to fix it :)

Answer 15 · 2017-06-16T04:07:16.000Z

Sorry been too busy to get a repo together. Will try to do that soon.

Answer 16 · 2017-06-19T06:41:36.000Z

And for the time being, you can also work around this by downgrading to v2.7.0. We'd still like to fix this, though :)

Answer 17 · 2017-06-21T13:39:16.000Z

Just having this issue myself. Could bundleDir be set by a command line option?

I did notice that if I had my stat file placed into my dist folder and run webpack-bundle-analyzer off of that, it will display the other sizes correctly, so that could be a workaround.

Answer 18 · 2017-06-21T13:54:16.000Z

@Ixonal Type webpack-bundle-analyzer --help in the command line to see all the answers.

Answer 19 · 2017-06-21T13:59:58.000Z

derp... Sorry, should've noticed that earlier.

Answer 20 · 2017-06-21T14:09:16.000Z

@Ixonal No problem =)

Answer 21 · 2017-06-21T17:05:46.000Z

I can only see the stat size when running it with webpack dev server.

Answer 22 · 2017-06-21T17:10:38.000Z

@PengyuanZhao it's how it should be because webpack dev server don't save output bundles in the real filesystem and there is nothing to parse.

Answer 23 · 2017-06-30T03:26:21.000Z

I can only see the stat size when running it with webpack dev server.

@th0r How to solve it?

Answer 24 · 2017-06-30T07:13:27.000Z

@warmhug, to see gzip and parsed sizes, don't use webpack-dev-server

Answer 25 · 2017-06-30T07:24:23.000Z

@warmhug Or if it's not so hard, could you read my message right above yours?

Answer 26 · 2017-07-13T10:39:27.000Z

@MrHavard Were you able to find some time to create a reproduction repo?

Answer 27 · 2017-07-29T14:18:36.000Z

Think it's related this.

angular/angular-cli#7057

Answer 28 · 2017-08-04T10:32:15.000Z

I think this may have been a issue to @angular/cli as I'm now using 1.3.0-rc.5 and the problem seem to have gone away.

Answer 29 · 2017-08-14T12:18:37.000Z

Having the same problems, could it be that webpack-bundle-analyzer just ignores the output.path config? If it would follow it, it would perfectly find my file.

webpack-bundle-analyzer -s stat webpack-build-log.json

Couldn't parse bundle asset "/Users/.../project-root/app.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

It tries to load the app.js from the root directory, while output.path is set to resolve(__dirname, 'dist')

Edit: Okay reading helps, I can just pass it as parameter. But, still, I'd love this to be an automated parameter <3

Answer 30 · 2017-08-14T14:27:50.000Z

Edit: Okay reading helps, I can just pass it as parameter. But, still, I'd love this to be an automated parameter <3

It is as automated as the CLI can be :) as it infers the directory from where your stats are.

I think that this issue is too vague as there seems to be multiple causes for this case. I'll close this issue for now. Everyone's free to open new specific issues with a proper bug report, if you think you've faced a bug :)