-
Notifications
You must be signed in to change notification settings - Fork 127
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reduce Bundle Size (excluding unused i18n and payment methods?) #337
Comments
Hi @JStonevalley, Thanks for reaching! That's indeed something we want to improve and is in our roadmap and will be part of an upcoming major release. |
Ok so there are no such options available at the moment? |
Hi @JStonevalley, Unfortunately, we don't have a timeline at this point, but it's something we are prioritizing for the next major version. |
It might be great to have also a ES6 build so we can use it for modern browsers and reduze some size. |
|
So our entire webapp is about 200 KB with all code, css, libraries etc. Until we import adyen-web and it explodes in size. Given the millions of times this code is downloaded each day, you really should spend some effort on making it smaller (or allowing us to only pull in the needed parts) |
Thank you for your comment. We're aware of this and currently working on a solution. Please, let us know if you have any specific suggestions or feedback on this. Hope this helps! |
Hi, thanks for getting back to me. One thing could be to write it in such a way that it's easier to tree-shake/only include what's being used. Right now one passes in a string for which component to be rendered, which means you have to look it up dynamically and thus have everything in the bundle. Instead, if we had to pass in the specific component, we could make sure to only include the needed ones in our bundle. Of course, this makes the outward facing API not as smooth to use since not everything is included by default.
Just some suggestions, details aren't so important, the point is to be able to import only what's needed.
Just some thoughts on how to make it more modular. |
@marcperez any further update on this, Adyen is by far the biggest offender for us right now. @matsinfiltratingvy suggestion would work well for us! |
Hi @herecydev, Thanks for bumping this. From v4.0.0, when using the ES Module version (through NPM), we currently dynamically load the language files. This should reduce the size of the library from the original 140KB to around 80KB. Hope this helps and we're always happy to hear of any idea or feedback, thanks! Also, thanks @matsinfiltratingvy for the great ideas above! |
@marcperez I've also notice that there is a dependency on preact. That's somewhat weird, as we are running within the context of React, so we're now having to use 2 frontend libraries. However if you just relied on react, then consumers can make the decision whether to use |
Hi @herecydev. Thanks for your comment. Indeed, we do use preact for our components (and not React). One of the considerations on this choice is the small size of the preact dependency (around 3KB). Hope this clarifies and thanks again for the feedback! |
@kholiavko-roman which version are you using? |
@aralroca have you tried using the bundle available in |
@m1aw I am using 5.15.0 |
@kholiavko-roman Depends a bit on the bundler that you are using, some version of webpack/rollup support different ways of doing this.
If this doesn't work you can try to point to the full path: WARNING: This version doesn't come with polyfills. So if you targeting specific browsers versions like IE11 you will need to provide your own polyfills. |
We are also struggling with huge bundle size caused by the Adyen dependency. Especially with payments user loading time is super important and is right now our biggest pain point with the Adyen web components. |
Apologies for the off topic point, @aralroca can you tell me how you prepped the js file size / names to go into that Voronei map? |
@RyanONeill1970 it's part of webpack-bundle-analyzer, hope that helps. |
I use Webpack bundle analyzer: https://github.com/webpack-contrib/webpack-bundle-analyzer. The bundles are mounted by Next.js Webpack logic, I don't know internally how they organize dependencies and page code, but normally looks good. |
Any updates on this? It's 267kByte now. I don't think it's a huge issue, since the code does not seem to be bundled on initial load but only when I go to checkout. So, things are not as scary as the bundle analyzer makes it out to be. |
This is very important for us. The modern version adds 216KB (gzipped) to our checkout. That is by far the greatest download and we would very, very much appreciate to be able to exclude not needed payment-methods and languages from the bundle. |
This is also very important to us. Adyen is 50% of our page load due to a ton of payment methods and languages being loaded for no reason. It would be very nice to have the option to exclude languages and payment methods. |
Closing this issue. |
@sponglord Is there a timeline for v6? |
@MakChan - we are aiming for the end of November / first week of December. However this is a loose deadline and could be subject to change, particularly as the end of the year represents Peak season, which can affect our release schedule. |
any news here? |
Hey @carly-cloud , We are currently working on the new major version which will reduce the bundle size. There are some details to wrap up still, but we are aiming for the end of February hopefully. |
@ribeiroguilherme Any updates on this already? :) |
Hey @fahu , We do have some updates 😄 we are working on it and wrapping up the final details. We also released an alpha version on In the upcoming weeks we will do a release candidate along with the migration guide/documentation 🙏 As we are performing tests now, could you (and also the other people that are following this thread) share more about your web app tech stack? Ex: webpack 4 or 5; vite; UI framework (react, svelte, etc); Nextjs, Nuxtjs, etc. These details can help us make sure we will test for different use-cases. |
Thanks for the update @ribeiroguilherme :) Looking forward to try it out! Tech stack is Angular 16 (probably 17 soonish) + Webpack 5. |
Thanks @ribeiroguilherme ! I've been checking this thread for a while now. Looking forward to the release as well. We're on nuxt3/vite |
We are using Next.js 13.0.7 and whichever module bundler that entails. |
Thanks for sharing guys - we will make sure to test the alpha version on these setups 🙏 |
Here we are using Vite to bundle a React app for our checkout It's a huge bundle size included in our app to use only the secured fields component and pt-BR locale. Waiting for 6.0.0 stable release to land, hopes this will fix the problem. |
Hi all! A BETA version of Web v6 is now available on Github. Feel free to take a look and give us feedback! We aim to release the official v6 in the coming weeks. More information can be found here. |
The major release, Specifically, you'll be interested in the section on treeshaking: Import Drop-in with individual payment methods |
Is your feature request related to a problem? Please describe.
The bundle size of the SDK is huge. There seems to be lots of i18n in the bundle that I will never use. As well as functionality for unused payment methods.
Describe the solution you'd like
It would be great if it was possible to include only the languages and paymentmethods that you need in the bundle to reduce the size.
Describe alternatives you've considered
Same as above
Additional context
The text was updated successfully, but these errors were encountered: