This is a crude POC to test performance improvements until yarn build works

[apz-gh]

What does this PR do?

• Implements lazy loading for components not required on first load

---

Bundle Analysis (all sizes are for gzipped js files)

• https://earn-git-fork-apz-gh-testing-modularization-superteam-earn.vercel.app/bundleanalyze/client.html

• https://earn-git-fork-apz-gh-testing-modularization-superteam-earn.vercel.app/bundleanalyze/edge.html

• solana/web3.js — 66.37KB

  • Related issue: web3.js: library is not tree-shakeable solana-labs/solana-web3.js#1122

• framer motion — 31.52KB

• chakra-ui — 33KB

• mixpanel — 18KB

• axios - 10.8KB

• cryptojs - 17KB

---

This preview dep. doesn't include posthog as it was disabled. But I consider that it also contributes a similarly large JS bundle which is imported on first load.

---

Web Vitals:

19-12-2023 18:51

-(https://earn.superteam.fun): https://pagespeed.web.dev/analysis/https-earn-superteam-fun/l03rm29hda?form_factor=mobile

• (https://earn.superteam.fun/sponsor): https://pagespeed.web.dev/analysis/https-earn-superteam-fun-sponsor/veidx3o3ut?form_factor=mobile

Search Console Report:

(Updated on: 18-12-2023)

Mobile:

Severity	Issue	Validation	URLs
Need improvement	CLS issue: more than 0.1 (mobile)	Not Started	19
Need improvement	LCP issue: longer than 2.5s (mobile)	Not Started	19

Desktop:

Severity	Issue	Validation	URLs
Need improvement	CLS issue: more than 0.1 (desktop)	Not Started	19

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
earn	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 21, 2023 0:26am

[apz-gh]

• Quite a good spot this landed at.
  • Caveats: not consistent though. pagespeed shows variations. lighthouse shows variations. need to investigate.

---

How — Get JS out of the render path:

• Moved GTM (google tag manager) to a worker
• Replaced axios with fetch (nextjs fetch, which adds a few things like caching on top of native fetch)
• Replaced router push state with Link (router import added a lot of js weight)
• Removed nprogress (and the router import that it was using) — there might be a css alternative or something lightweight this can be replaced with.
• PostHog was disabled — it was being instantiated in the critical rendering path (this is a ::todo::, bringing posthog back with next/script worker and dynamic imports would probably help it stay out of the rendering path)
• Does optmizePackageImports work with pages router — i have no idea. yarn build + webpack bundle analyzer might help.