How Did I Reduce My Bundle Size to a Quarter?

Published in

Stackademic

3 min readMar 20, 2024

I was moved from B2C to B2B and the moment I pulled the code and ran it, I found the bundle size was 20.03 MB and the node modules themselves were 19.32MB

As a developer, it is quite irritating to ignore this problem, so I connected with my manager and was told we don’t have the bandwidth to work on this, so I took the strategic approach, I made the proposal saying

How this is impacting the customer and UX and how this can lead to problems in the future.
Seeing we don’t have the bandwidth, I proposed to create a ticket and assign half a day story point i.e., a timeline of the half to see what I can do.
I got the feedback and approval on this proposal and quoted what we have to do next, which was ignored.

Nonetheless, I got half a day of excitement

On the first iteration of bundle analysis, I found out that the total bundle size was 20.03 MB, and that node_modules contained 19.32MB

On the second iteration, I found out @ant-design/charts which had a dependency @antv i.e., we split 6.38 MB from the main.js which is 31.5%, this we can fix by simply lazy loading inside the react app (which is going to split the bundle and separate it from the main.js) because it was used at 2 places, after applying the lazy load I had something like

On the third iteration, if we see the antd then we still have 6MB, we have 2.39MB coming fromant.variable.min.css but why? Because antd v4 had a dependency of antd.variable.min.css https://4x.ant.design/docs/react/customize-theme-variable

But the question is do we need the runtime config, if we are already creating an app and configuring the ant variable once then why not define these theme variables at the compile time inside the webpack config of the app (https://4x.ant.design/docs/react/customize-theme#Customize-in-webpack) and remove this dependency

And tada, only bundle is now 10.33 MB

I found something very off it's showing tslib as 3.07MB, which meant something is off with package linking, so removed package-lock file, reinstalled, and changed the analyzer from source-map-explorer to webpack-bundle-analyze

Ahh, found the problem

problem is also because of the aws-sdk and the initial thought was this is a required dependency but on the ground it's not, we are using the instance of KinesisVideo from aws-sdk and that's the only use of aws-sdk and for that its taking 3.64MB but we can simply approach this using @aws-sdk/client-kinesis-video which is much smaller in Kbs

Further, I also figured that rc-picker which is a dependency of antd also has 1.74 MB where 1MB is just full of locale where we are not even using all the locale except enUS and figured out a way to exclude all the unused locale using webpack config which is mentioned here

And finally After fixing these issues the entry point js i.e., main.js lower down to 6.2MB from 20.3 MB