Big bundle size - Githubissues

Giveth / giveth-dapps-v2

This project is the aggregation of GIVeconomy and Giveth.io DApps in a single repo

https://staging.giveth.io

GNU General Public License v3.0

54 stars 33 forks source link

Big bundle size #3603

Open aminlatifi opened 5 months ago

aminlatifi commented 5 months ago

The production page is loaded so slowly since we have a JS bundle bigger than 1MB size.

https://giveth.io/_next/static/chunks/pages/_app-7b7ed37c11059ff3.js

Is it possible to improve it? split it to smaller ones or reduce its size?

MohammadPCh commented 5 months ago

@aminlatifi Thanks for creating this issue. As you can see, the most-sized bundle is _app-e7197....js.

Unfortunately, we cannot identify any valuable components to remove from this bundle. If there are specific elements you think we could optimize, please let me know.

aminlatifi commented 5 months ago

Thanks @MohammadPCh for preparing this fancy schema. Why do we have _app.tsx while we have index.under ui/dist/esm?

aminlatifi commented 5 months ago

Also, I see design system takes large space. Checked the next dependency version on its repo and dapp repo, they are not the same. Do you think synching their version will reduce the bundle size by not having two version of next?

jainkrati commented 4 months ago

What is the contribution of images in this bundle @MohammadPCh ?

MohammadPCh commented 4 months ago

@aminlatifi, yes, they are not the same, but I don't think it's a big problem. Let me update and put the nextjs version. Thanks for mentioning it.

MohammadPCh commented 4 months ago

@jainkrati, just to clarify, this bundle map relates to JavaScript files. As for images, we utilize the Next.js package, which I'm sure takes care of lazy loading and other optimizations.

MohammadPCh commented 3 months ago

This is the result after we update packages for the DApp and UI-design-system.

and this is for our main js:

as you can see there are some opportunities to optimize our app:

using superfluid contract instead of its SDK.
remove lottie package and use simple CSS animations. but both of them may decrease user experience quality.

MohammadPCh commented 2 months ago

@jainkrati As noted in my previous comment, we have two primary methods to reduce the JavaScript bundle size, but both impact the quality of the user experience. What's our decision moving forward?

jainkrati commented 3 weeks ago

no @MohammadPCh we cannot impact the quality of user experience. could we try alternatives like caching or splitting some code / 3rd party libraries? if Yes, pls let @RamRamez take it up as you are working on DeVouch