I have been working on a relatively straightforward React project, which has about 8 components, and uses a relatively small number of commonly used plugins (including styled-components, react-spring and AWS- Amplify)
I have installed and run source-map-explorer to see why my build is over 3MB, and the resulting visualization shows over 2MB of my bundle being taken up by 'null'.
Could someone explain what 'null' refers to in this case? My guess is that it is the size of my package, but I can't imagine why it would be so large.
Also, if anyone knew of any nifty resource on how to reduce the size of the remaining 1MB of node-modules on a CRA project, that would be amazing!
In the end, it was an AWS Amplify issue. My app was exclusively using the API functionality, but I was importing the entire library.
In my code, I changed:
import Amplify from "aws-amplify"
into
import Amplify from "@aws-amplify/core"
import API from "@aws-amplify/api"
and my bundle size was reduced from over 3MB to 679kb.
Not sure why it appeared as 'null' in the source-map-explorer, but this might help anyone using AWS Amplify and encountering an issues with bundle size. Other resources I found helpful:
https://github.com/aws-amplify/amplify-js/wiki/Amplify-modularization