Excessive Bundle Size

[ppeg34]

The checkout sdk accounts for a very significant portion of our bundle size...

In addition to the ~500k size in the attached screenshot, it brings in rxjs to tack on another 100k dependency. For starters removing this (also from @bigcommerce/data-store) could significantly help.

All-in-all this accounts for the majority of our app bundle size for our checkout process.

[ankurbigcomm]

Thank you for the suggestion @ppeg34 . Happy to take it up with the team and see what can be done to reduce the bundle size.

[davidchin]

Hi @ppeg34, we won't be able to replace the aforementioned dependencies without a significant rewrite. And the replacement wouldn't guarantee a significant reduction in size, considering we need to retain existing functionality.

What we can do, however, is to see if we can optimise code splitting and tree shaking, so that we can eliminate code from the bundle that's not in use by its consumer. We do have a long standing ticket CHECKOUT-3009 tracking this issue. Hopefully we can make some progress in the near future.

PS: One thing to note is that we should look at the gzip size instead of the raw size. So in your case, it's ~100kb instead of ~500kb. Having said that, it's still high, so there's still room for improvement.

[tleunen]

Hi @davidchin ,

That is great you have an internal ticket to follow up on this issue. As you said, 100kb gzip is also too high for a library. Outside of trying to remove some of your dependencies like RxJS which would require quite a rewrite from you, I'd encourage to revisit the way you build the library and deliver that to the consumers.

Currently, you create multiple bundles (checkout-sdk, embedded-checkout, checkout-button, ..). I believe that's where the huge gain could come. Instead of creating bundles and giving bundles to consumers, simply convert the code to ES5 (or anything you want) without creating any bundles. That way, code splitting can be done on the consumer side properly. I'd guess that most people don't use 100% of the code from the bundles.