Paypal-checkout-components: Bundle size checkout.lib.js

[michelalbers]

Description

I recently ran the bundle analyzer over my webpack app and was astonished by the paypal bundle size which is above 1 MB:

Is there a way to split up the sdk so we can import only the files we need?

Steps to reproduce

Build any module with paypal SDK and webpack.

Affected browsers

all

Edit

The suggested way to load the sdk via

<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>

is 1.5 MB (!!!!) in size. Even minified its over 900 kB.

[trainerbill]

v5 is being developed to mitigate this. will be using chunking to dynamically load pieces of the sdk that are used.

[leeoniya]

@trainerbill,

until v5 ships, you guys should leave one of these "size" issues open rather than closing them all (#443, https://github.com/khoanguyen96/vue-paypal-checkout/issues/30, #707).

loading 992k [1] of script when previously 0k was required [2] is a bit absurd. for instance, we don't even ship 100k of our own scripts in total.

despite [3] being "deprecated", the recommended replacement is not a viable option, especially on mobile where it takes several seconds to load.

is there any movement on v5 since the last update?

thanks!

[1] https://www.paypalobjects.com/api/checkout.min.js
[2] https://www.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token={token}
[3] https://developer.paypal.com/docs/classic/express-checkout/ht_ec-singleItemPayment-curl-etc/

[trainerbill]

I can't give any timeframes on GA release, but it is an active project. For now, it is recommended to load the script async on a previous page so it is cached.

https://github.com/paypal/paypal-checkout/blob/master/docs/performance.md

I will reopen for visibility since its a good title.

[leeoniya]

For now, it is recommended to load the script async on a previous page so it is cached.

for our simple (and common) auth -> capture use case there's no reason to invest time to switch to the new checkout.js api while it needs these crutches to produce a sub-par experience. hopefully the deprecated api's stick around until v5 is GA and weighs < 50k (pre gzip).

thanks for reopening, btw.

[bluepnume]

We're running a beta for the new sdk at the moment. Right now it's at 80kb and we're exploring lazy-loading to reduce its footprint even further. Closing this issue as it is unlikely these performance improvements can be backported to checkout.js.

[hnliyuan]

where is the new sdk?

[isaachinman]

Looks like v5 is out, have bundle sizes been reduced with that? Also, I don't see a migration guide from v4 to v5 anywhere.

[leeoniya]

if it's this [1], then it's quite a bit smaller 214 KB (65.9 KB gzipped).

[1] https://www.paypal.com/sdk/js?client-id=sb

[Benoit1980]

Looks like v5 is out, have bundle sizes been reduced with that? Also, I don't see a migration guide from v4 to v5 anywhere.

Yes, noone knows what is happening with this package. Any news please? It is difficult to find out what we should be using, if V5, where it is? And is it working with the patest paypal checkout package?

Thank you/

[bluepnume]

Please see https://developer.paypal.com/docs/checkout/ -- these are the full docs for the latest version of this sdk. Thanks.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.