--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.

[n8sabes]

@bugzpodder -- Thanks for the time on this. I'll spend a little time looking at the source-map-explorer project.

[arialpew]

@bugzpodder I tried with single quotes, double quotes, no quote, npx, nothing helps. What is strange is that other users (like @n8sabes) don't seem to have any problem.

Anyway, i discovered "craco" (it's like "react-app-rewired" from @n8sabes) and Webpack Bundle Analyzer work perfectly 👍 . Be careful though because it's almost like an "eject".

If you want to stay with Webpack Bundle Analyzer :

npm i craco cross-env webpack-bundle-analyzer --save-dev

"scripts": {
    "analyze": "cross-env ANALYZE=true npm run build",
    "build": "craco build",
    "eject": "craco eject",
    "start": "craco start",
    "test": "craco test"
}

craco.config.js

const { when } = require('@craco/craco');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  webpack: {
    plugins: [
      ...when(Boolean(process.env.ANALYZE), () => [new BundleAnalyzerPlugin()], []),
    ],
  },
};

[lazarljubenovic]

I've seen these warnings too but the UI should pop up in your browser after running the command.

For me, an empty Visual Studio Code window opens when I run the command (along those warning). I thought the warnings were the reason, but apparently that has nothing to do with this?

[bugzpodder]

If none of your source code are mapped (let's say every message has "cannot map 100% of your sources" then perhaps you would get an empty site. Double check your source maps are being generated (.js.map files in build) and make sure quotes are added if you are running on windows.

[bugzpodder]

Please provide a minimal repro case if you are experiencing an issue.