--stats flag is gone in v3?

[audiolion]

The --stats flag removal should be documented as a breaking change, or at least somewhere in the v3 release notes right? My CI processes relied on using the bundle-stats.json file and now are failing and I have to come up with a new way to track my bundle sizes. Obviously I can read the file sizes in the directory, but now I have to gzip them to see those sizes.

looks like this was a direct commit with no issue or discussion so might be why it was missed when generating changelog notes:

e7a427a

cc @bugzpodder

Not a huge deal, but I thought I was doing something wrong and spent a bit of time digging to find out that this changed.

[petetnt]

Hi @audiolion, webpack-bundle-analyzer was removed in #6477 in favor of just using source-map-analyzer. You are right though, the removal should be marked as a breaking change.

[arialpew]

Sad news.

I will give a try on "source-map-explorer" but "webpack-bundle-analyzer" Is really far in the stratosphere of bundle viz.

• Colored treemap with flashy color to separate each chunk.
• Show both gzip/parsed/unparsed size.
• You can toggle (hide/show) each chunk.
• You can target specific chunk (hide all other).
• You can zoom/dezoom .
• Module path visible when you mouse hover a module.

[audiolion]

@kMeillet you can basically use the ~14 LOC they removed to create the same stats file

[n8sabes]

This is a very sad situation and huge step backwards. webpack-bundle-analyzer is a far more useful tool than source-map-explorer. Workarounds appreciated to get webpack-bundle-analyzer back online in CRA.

Webpack Bundle Analyzer: The interface is superior allowing "readability" across all bundle files in the build directory and allows filtering in the roll-out control panel to zero in on specific areas making it easy to tune the project.

Source Map Explorer: Exceedingly simplistic requiring you to open each bundle file manually.

[bugzpodder]

Apologies for missing the documentation on the breaking change. The --stats flag was included in 2.x as part of a workaround to visualizing bundles that uses code splitting and it was meant to be temporary (thus was never added to the docs). This was previously hard to do with source-map-explorer, however they were recently updated to support for multiple bundles. Since the primary purpose of source-map-explorer and webpack-bundle-analyzer is to show you what's inside the bundles as such we don't see a need to continue supporting both at this moment.

[n8sabes]

@bugzpodder can you offer any workaround(s)? So abruptly losing a tool of this quality is a HUGE step backwards. It allowed us to quickly identify undesirable modules (as small as we think they may be sometimes, and are not) and then tune projects accordingly.

If source-map-explorer is the only blessed path forward, maybe Fb can offer resources to source-map-explorer to help it catch up to webpack-bundle-analyzer.

Ideas welcome.

[bugzpodder]

This project and source-map-explorer are not actively maintained by anyone at Facebook and AFAIK they do not use it internally. If you have ideas on how to improve source-map-explorer, please contribute to their repo by filing an issue there and detail which functionalities you think webpack-bundle-analyzer does better: https://github.com/danvk/source-map-explorer/releases. Feel free to tag me as well.

[n8sabes]

Indeed, and understood. Just a very sad situation and wish we could get --stats back to not lose such powerful tools until something equivalent can be available.

[bugzpodder]

@n8sabes I just saw your GIF above.

You mentioned that: Source Map Explorer: Exceedingly simplistic requiring you to open each bundle file manually.

the latest version provides a combined module that shows each chunk, which you can click and zoom in.

[n8sabes]

@bugzpodder -- Thank you. The new combined bundle feature in source-map-explorer is a good step forward.

Now, just need GZIP size calculations and while it's not as pretty, that would cover the core utility of webpack-bundle-analyzer that was lost.

[arialpew]

"source-map-explorer" 1.8.0 didn't work in my "create-react-app" 3.0.0 project :/ (Windows 10 with WSL).

npm run build # react-scripts build
npm run analyze # source-map-explorer 'build/static/js/*.js'

[build/static/js/13.0d9b757c.chunk.js] Your source map only contains one source (Manage/CreateGroupModal/Modal.js)
This can happen if you use browserify+uglifyjs, for example, and don't set the --in-source-map flag to uglify.
See https://github.com/danvk/source-map-explorer/blob/master/README.md#generating-source-maps
[build/static/js/runtime~main.ecb04311.js] Your source map only contains one source (../webpack/bootstrap)
This can happen if you use browserify+uglifyjs, for example, and don't set the --in-source-map flag to uglify.
See https://github.com/danvk/source-map-explorer/blob/master/README.md#generating-source-maps
[build/static/js/0.9141fd24.chunk.js] Unable to map 134/47493 bytes (0.28%)
[build/static/js/10.1e325143.chunk.js] Unable to map 136/6622 bytes (2.05%)
[build/static/js/11.08c2f939.chunk.js] Unable to map 212/21887 bytes (0.97%)
[build/static/js/12.9525b930.chunk.js] Unable to map 1010/3023 bytes (33.41%)
[build/static/js/3.005c2940.chunk.js] Unable to map 130/410403 bytes (0.03%)
[build/static/js/4.0a579040.chunk.js] Unable to map 148/482048 bytes (0.03%)
[build/static/js/5.519b2f03.chunk.js] Unable to map 210/14484 bytes (1.45%)
[build/static/js/6.ca3ffb7a.chunk.js] Unable to map 134/14051 bytes (0.95%)
[build/static/js/7.68873e16.chunk.js] Unable to map 134/4001 bytes (3.35%)
[build/static/js/8.58e93cd0.chunk.js] Unable to map 134/12262 bytes (1.09%)
[build/static/js/9.178cd834.chunk.js] Unable to map 134/8639 bytes (1.55%)
[build/static/js/main.28d7a183.chunk.js] Unable to map 561/29282 bytes (1.92%)

Well, it's probably a "source-map-explorer" issue. At the moment, my current workaround is to downgrade to CRA v2.x and run Webpack Bundle Analyzer when i need to inspect my bundle.

[bugzpodder]

@kMeillet while some users reported issues with using quotes on Windows, eg #6870
It seems that you got it running correctly?
I've seen these warnings too but the UI should pop up in your browser after running the command.

@n8sabes, I agree that GZIP might be useful, but in its absence I have been using the raw size of the js which is a good enough approximation in terms of relative size of modules. Also, since you are already using react-app-rewired, if you must use webpack-bundle-analyzer you can use a webpack plugin such as https://github.com/FormidableLabs/webpack-stats-plugin to get it out.