Performance Issue: Doesn't support tree shaking

[cseas]

Problem

Blade ships all components into one flat file (@razorpay/blade/build/components/index.web.js) which bundlers in consumer projects cannot tree shake. To support tree shaking, Blade needs to ship with the original tree structure of the project.

For example, if a user imports one component from Blade (say Button), they will get all the components & utils from Blade in their final build. This hurts performance of the applications built with Blade since the bundles delivered to the browsers/apps are much bigger than they need to be.

See example main.bundle.js built with Blade by using one Button.

Suggestion

• Use preserveModules option from Rollup to retain original tree in the bundled package.
• Add sideEffects field to package.json to signal to bundlers to use tree shaking.
• Fix the output format of the bundle. While it does have import/export statements, I see it's also full of var declarations so we need to update the output format (maybe generatedCode: "es2015").

[saurabhdaware]

I think Anurag recently checked this and it was working. @anuraghazra can you confirm?

[anuraghazra]

@cseas thanks for the concise testing & the repro, i'll get back to you after testing it on my end.

[adilk121]

yes correct

[saurabhdaware]

https://github.com/razorpay/blade/pull/1045

This PR will fix the tree shaking 👯