Your NextJS App is Too Big
Vložit
- čas přidán 10. 09. 2024
- NextJS is great! Those red numbers are scary tho. Hope this video helps you find some strategies to keep your Next app small and your user experience snappy!
JOIN MY PATREON FOR EARLY ACCESS TO VIDEOS AND DIAGRAMS / t3dotgg
Next Bundle Analyzer: github.com/ver...
Idez killed it w/ this one so make sure he gets some love in the comments
Twitch link: / theo
Twitter link: / t3dotgg
Discord link: t3.gg/discord
Everything else (insta, tiktok, blog): t3.gg/faq - Věda a technologie
I joined as a junior developer last year to a fintech company, and recently we've been squashing our dependencies just like this. We found that in our bundle, we were adding language support for every language imaginable, however our application atm only supports English; Removing those languages obviously greatly reduced the size for that exported module. We're doing the same for the rest of the application, attempting to optimise as we go; Our old build times for the entire front end was around 40 mins on a 2018 Mac now it's around 40 secs. Still work to do, but we'll get there :)
Fellow Fintech engineer here.
There is a part of me that thinks we work for the same company based on what you just said.
Yes you do
@@fabhi oh shi
Frt too l kk la k ok though yup JJ HH HGH h uhh uh-huh baby you huh he hh huh hh ph hi HGH oh my hh lol no j hh la Bamba kk try hh baggy keep p MGK makeup in you k ok kk bsj man ok
@@fabhi hahaha
any route that includes the "your-mom" package increases with 4 gb (after gzipping)
Real knob ain’t ya
I really appreciate your content! Keep it up! I’m applying a lot of stuff from your videos in my daily job as a Front End engineer
too true, the only content creator i know who talks about stuff thats intermediate
I'm not the only one!!! Jack Herrington is great as well definitely check him out
@@t3dotgg that is correct
my nextjs isn't big, it just keeps refreshing in an infinite loop
Mine aren’t
Haha, throwback to when I was new to react and didn't understand the useState hook
great video, btw you can press F1 and type "Organize imports" and then your unused imports are removed :)
0:16 : That's what she said!
this literally helps me shave off so much off my app.. love you theo. keep doing what you're doing. you're literally the only dev on youtube worth their weight in gold..
Watched this video and used all the tips from it, ended up reducing about 30kb in a next app just by dynamically importing components
Man the visualization is insane. Definitely gonna test this out, thanks 🙏
mostly when analyzing other's code, i find huge lodash and momentjs 😂
I think the same is true of lodash, but moment for sure has an issue with tree-shaking. Import just one function and you end up getting the entire package. I found a way to solve that a few years ago, but don't remember at the "moment"--
but in any case, no one should be using moment anymore.
@@dweblinveltz5035 date-fns is superior to Momentjs, in my opinion. Simple and easy to use.
My mate used momentjs in a project we worked on, should I be worried?
@@evanskwofie2443 It will probably work, but hopefully your mate kept his domain logic separate so you can easily swap it out with a more up-to-date library.
Times when dummy thicc is not better
Thank you so much for this, I haven’t done front-end for a while, getting back to this now.
Your content has been so helpful to me 😊
I am a bit confused about 1 thing:
Next.js VS Vite,
Especially if I have another backed in Java/kotlin,
Which is something I might use for certain backend projects & I still want a react front-end on the same port
i feel personally attacked that this was recommended whilst trimming my nextjs app lol
Your timing is perfect. I was literally looking for this info today!
Looks like some great opportunities for improvement in this tooling! Better route-based bundle analysis as well as fixing that server stuff.
Type imports instead of regular ones resulting in massive reduction - yeah, seen that before.
Great upload. Do dynamic imports impact time-to-interactivity?
Even i m interersted to know about this
I'm curious as well 🤔
Im struct at here
My first load js size is 96kb
Im running on aws server using 4gb RAM
when i load the application at first
The cpu is hitting near to 90% and memrory is 80%
The event and compiled time is 12s
🙏🏻🙏🏻
Any solution for bringing the percentage of cpu and memory
Thank you for Theo, I really appreciate let us know how to analyze bundle size. cuz of it I realize that I used mui for only dateTimePicker but it charged of 800kb bundle size which is bigger than combined of all other modules...! but also I used this dateTimePicker only at my modal component and I tried to use dynamic import. I reduced half of bundle size ( 210kb -> 100kb)
thank you so much and always feel grateful videos you made
Great practical tutorial! Thanks Theo.
This confirmed that I did a good job making an api-connector I use in SSG not leak into the client bundle. Somehow zod snuck in there tho, so that's an investigation waiting to happen.
Edit: I also just found out about the rule consistent-type-imports from typescript-eslint's eslint-plugin, that can be set up to make sure you use import type wherever possible, which removes a bunch of enums and stuff I never needed from bundles.
Lazy loading, nice one 👍🏿
Not gonna lie, when I saw this pop up in my feed I thought it was going to be another Astro video
Hello sir please let me know if you need video editor for your video im video editor as well as nextjs developer
Is there anything that can be applied in the same way for just a CRA app?
Thank you for the great work!
Perfectly timed release, just when I needed it.
lighthouse showed ~20 performance points for my app. I used next/dynamic to load react-modal and now lighthouse shows 50 points!
can you make video on how to handle payments
Step 1: Use Stripe
Step 2: Profit
Theo, can you tell about the error handling? Custom exceptions, catching the errors in prod with tools like Sentry, async errors visualisation, error notifications/pages etc.
This is pure gold
why use duck duck go? that too on google chrome? that's like putting off fire with fire
Hey, don’t call the Ducky too big! He’s just doing his best.
Thanks man!!
Ooh upgrade to the SM7-B
super useful!
Really good! Tanks
Theo what do you think about micro frontends? Are they useful?
any recommendations on storage for create-t3-app?
a video would actually help to fully move out of supabase
Exactly what I was thinking 🤔
Damn, I'm switching to Java spring boot.
Tell me how it goes
Such a valuable vid
NextJS - PHP V2.0
That's what she said.
How to make next app smaller? Just don't use next lol :D
Great video!
That's whqt she said
bro made an amazing video 🙌
Shahid Kapoor
use php and get rid of all of this shit
nextjs is now something from the past
hehe first
Make it smaller by not using react in general
“Developers who care about performance”. Man, you write JS lol
So ?
Man, you are a furry lol
your videos are too long.
"massive 1 megabyte" cries in .jar
Solution: SvelteKit 👀
Production ready solutions only ;)
Considering that all the deps in this video were NOT NextJS, I'm sure that switching to SvelteKit will magically make the non-Next code in my app smaller too
That's what she said.