Analyzer page showed different bundle size than browser devtools

EnixCoda commented 1 year ago

Issue description

I'm trying to inspect and then lighten a large bundle size. But the sizes shown in this analyzer and browser devtools Network panel are significantly different. 60MB+ VS 130+MB.

webpack-bundle-analyzer (62MB)	Chrome devtools (137MB)

webpack is run with webpack-dev-server, so there is only Stat mode, not in gzip mode.

I've reread the readme and it seems no option would be related to this.

Technical info

  System:
    OS: macOS 13.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 107.78 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  npmPackages:
    assets-webpack-plugin: ^3.5.1 => 3.8.4 
    fork-ts-checker-webpack-plugin: ^6.5.2 => 6.5.2 
    optimize-css-assets-webpack-plugin: ^6.0.1 => 6.0.1 
    uglifyjs-webpack-plugin: ^1.2.7 => 1.2.7 
    webpack: ^4.27.0 => 4.46.0 
    webpack-bundle-analyzer: ^3.5.0 => 3.5.0 
    webpack-cli: ^3.1.2 => 3.1.2 
    webpack-dashboard: ^2.0.0 => 2.0.0 
    webpack-dev-server: ^3.8.1 => 3.8.1

Debug info

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

As plugin.

If plugin, what options were provided?

new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    reportFilename: `webpack-bundle-analyzer.html`,
})

What other Webpack plugins were used?

webpack.HotModuleReplacementPlugin
webpack-dashboard/plugin
webpack.LoaderOptionsPlugin
fork-ts-checker-webpack-plugin

It would be nice to also attach webpack stats file.

I am Sorry I cannot provide it directly because there may contain sensitive data in the file and package names of the project. Hope you understand!

Let me know if there is anything else I can do to provide more info. Thank you!

valscion commented 1 year ago

Do you see a parsed size? If not, then we might not support showing that with webpack-dev-server. Stat size is the original size of sources webpack reads, not what is sent to the browser.

Try running without webpack-dev-server.

EnixCoda commented 1 year ago

Retried without webpack-dev-server and this time it shows Parsed size, matches the size shown in Chrome devtools.

And it seems the Parsed size is ~2 times the size of Stat because I have source map enabled.

webpack-contrib / webpack-bundle-analyzer