Grant Application: swap.cow.fi performance - bundle optimization (copy)

Grant Title

Grant Application: swap.cow.fi performance - bundle optimization

Author(s)

Senior Web Developer - Konstantin Barabanov: (https://github.com/crutch12) Main Point of Contact - https://t.me/criitch

Experiences and qualifications

• see here: https://forum.cow.fi/t/grant-application-swap-cow-fi-performance-prerender-html/3301

Grant Description

Currently, the swap app build command generates following js bundle:

• Total size: 19.02 mB (4.52 mB brotli)
• Initial js load size: 7.8 mB (2.16 mB brotli)

My tests have showed that we can reduce these sizes to:

• Total size: 16.63 mB (4.12 mB brotli)
• Initial js load size: 4.41 mB (1.32 mB brotli)

So the initial load boosts up more than x1.5 times.

And it can be achieved just using some bundle optimization techniques: without significant code base changes and without a lot of effort.

Here is the list of applied optimizations:

• update @1inch/permit-signed-approvals-utils version and use via async import
• • this library is archived, so we may copy some implementation to get rid of the most often usages
• • this update leads to @cowprotocol/permit-utils breaking change (getPermitUtilsInstance is async now), so we have to release it with new major version
• update @safe-global version and use @safe-global/api-kit via async import
• • new versions of @safe-global don't require protocol-kit and safe-ethers-lib usage
• • no more web3 requirements
• • update changes return types a little, so had to fix it
• deduplicate bn.js
• update @walletconnect
• use framer-motion via async import
• use lottie-react via async import
• use lottie/progressbar-step-*.json via async import
• better vite's manualChunks usage

Also: many deps have new releases with esm support, so we win a huge amount of size thx to tree shaking.

Expected impact:

• Faster first paint and perceived performance (> x1.5 times). See the pagespeed metrics comparison in the first comment.

Another changes/features I would like to provide with this feature

• better chunks/entrypoints/assets naming
• https://www.npmjs.com/package/rollup-plugin-bundle-stats usage to compare bundle size diff in future

Type of Grant

Milestones-based

Milestones

Milestones	Title	Duration	Funding request
Milestone 0	Proof of Concept (PoC), prepare PageSpeed Insights reports	COMPLETED	400 xDAI + 500 COW
Milestone 1	Prepare changes for neat PR	1d	0
Milestone 3	Better naming, bundle-stats usage	0.5d	0
Milestone 4	Testing	1d	0
Milestone 5	Update contribution docs, setup eslint rules	0.5d	0
Milestone 6	Provide PR	0d	400 xDAI + 500 COW
Milestone 7	Fix found related problems	unknown	0

Length

I'm ready to start as soon as the grant is approved. I won't work full time on it, but believe I can complete it in ~1 week after approve.

Funding Request

800 xDAI + 1000 COW for the whole feature.

Gnosis Chain Address

0xd26ecc4457eb51cde9a5d44d316b3e83d60f2efb

Other Information

I've already did a prototype and will provide PageSpeed Insights reports in the first comment.

As you can see, such metrics as First Contentful Paint, Speed Index, Largest Contentful Paint are lower with those optimizations.

Future (out of current scope) steps could be:

• get rid of web3-react deps
• load every page (except swap) via react's lazy
• migrate @ethersproject to viem
• use @uniswap via async import
• use some common and modules modules via async import (they are really huge!)
• in cow sdk libs: use @safe-global via async import
• in cow sdk libs: use @defuse-protocol/one-click-sdk-typescript via async import

Terms and Conditions

By submitting this grant application, I acknowledge and agree to be bound by the CoW DAO Participation Agreement and the CoW DAO Grant Agreement Terms.