How we reduced Next.js page size by 3.5x and achieved a 98 Lighthouse score

Colin Armstrong

Colin Armstrong

timdaubFarcaster
timdaub
Commented 2 years ago

Kiwi News bundle.js. It's sadly 2MB big and I'd like to reduce its size. But I don't see any obvious optimizations.

ColinFarcaster
Colin
Commented 2 years ago

are you lazy loading? eg loading connectkit lazily when needed since it's massive

timdaubFarcaster
timdaub
Commented 2 years ago

I switched to script defer now

timdaubFarcaster
timdaub
Commented 2 years ago

@colin but I don‘t do code splitting, should I? It seems like massive complexity increase

pugsonFarcaster
pugson
Commented 2 years ago
timdaubFarcaster
timdaub
Commented 2 years ago

npm ls framer-motion web@0.0.0 /Users/timdaub/Projects/attestate/kiwistand/src/web └─┬ connectkit@1.2.4 └── framer-motion@6.5.1 hehe

timdaubFarcaster
timdaub
Commented 2 years ago
:grin:Farcaster
:grin:
Commented 2 years ago

just delete it all. that site doesn't need any js

timdaubFarcaster
timdaub
Commented 2 years ago

actually web3 without JS is sadly not possible but otherwise I‘d do it

Phil CockfieldFarcaster
Phil Cockfield
Commented 2 years ago

I'm playing a similar code-splitting game with "@farcaster/hub-web" right now! I feel 'ya @timdaub.eth !!! Bundle size explosion can be like playing whack-a-mole. I find knocking it in the head early is the easiest way as untangling later become disproportionately harder and harder for me to get my head around.

timdaubFarcaster
timdaub
Commented 2 years ago

😞

Phil CockfieldFarcaster
Phil Cockfield
Commented 2 years ago

I'm sneaking up on it! Haven't put any real work into busting that "blood clot" up yet. Good luck with your bundle surgery! 🫠💪

MatthewFarcaster
Matthew
Commented 2 years ago

Are you using Next 13? that’s one alternative idea also wonder what rainbowkit size v connectkit would be

timdaubFarcaster
timdaub
Commented 2 years ago

nope, express and reactjs

notdevin Farcaster
notdevin
Commented 2 years ago

I’m kinda digging the way next splits up client and server code, I’ve been trying to go deep on the next app directory designs

Joe ToledanoFarcaster
Joe Toledano
Commented 2 years ago

Can you migrate from Ethers to Viem?

timdaubFarcaster
timdaub
Commented 2 years ago

I‘m open to it but what are the consequences and what do I gain?

Joe ToledanoFarcaster
Joe Toledano
Commented 2 years ago

Outside of the time to migrate, would check to see if there's any gaps in coverage for how you currently use Ethers (migration guide: https://viem.sh/docs/ethers-migration.html) but you'd likely see some benefits from a bundle size & performance standpoint: https://viem.sh/docs/introduction.html#bundle-size

Charles Yoo-NautFarcaster
Charles Yoo-Naut
Commented 2 years ago

Are multiple dependencies loading different versions of BigNumber? This was something that was bothering me but couldn't figure out a good solution

AdrianFarcaster
Adrian
Commented 2 years ago

You don’t need to include all of ethers. You can include just it’s sub packages that you use. Also, consider using something like rainbow kit or connect kit instead of 3 wallet libs

timdaubFarcaster
timdaub
Commented 2 years ago

I use connectkit already. And I'm not using ethers at all in my frontend, that usage comes from wagmi and connectkit

wizzardFarcaster
wizzard
Commented 2 years ago

i think native bigint is available pretty much everywhere rn?

How we reduced Next.js page size by 3.5x and achieved a 98 Lighthouse score