Search code examples
node.jsreactjsprofilingsource-maps

How can tiny-invariant.js be so big?

I am trying to optimize the size of my react app chunks. I analyzed them using:

source-map-explorer 'build/static/js/*.js

The result is the image below and it show that the tiny-invariant.js is taking 774KB of space. It doesn't make sense to me. How can a lib that takes 12.2kB unpacked show up as taking 774KB?

What can be wrong? Is source-map-explorer buggy? Right now that's my main explanation.

Output of source-map-explorer

Solution

  • I think source-map-explorer is NOT correct in this case.

    My solution was to compare the source-map-explorer result with the one from webpack-bundle-analyzer:

    > npm run build -- --stats
> npx webpack-bundle-analyzer ./build/bundle-stats.json

    (The feature is currently undocumented (documentation was removed), because the CRA team find the labelling of webpack-bundle-analyzer misleading, see: https://github.com/facebook/create-react-app/issues/4563)

    In webpack-bundle-analyzer result I found that the same size was actually from:

    • moment-timezone/data/packed/latest.json.

    I guess source-map-explorer doesn't work well with json files.