how to remove unused css and js in production build
Unanswered
Black carp posted this in #help-forum
Black carpOP
Testing production build nextjs pages locally, and the chrome lighthouse tells there are unused js and css.
Check the coverage in the dev tool and found that there are lots of unused tailwindcss and some js which bundled in the production build but not been used in the page.
The question,
does the current nextjs build tool has such function that could bundle only the css and js needed page by page to have better performance ? Thank you
Check the coverage in the dev tool and found that there are lots of unused tailwindcss and some js which bundled in the production build but not been used in the page.
The question,
does the current nextjs build tool has such function that could bundle only the css and js needed page by page to have better performance ? Thank you
14 Replies
Checkered Giant
no auto way unless you write the custom script.
it's better to figure out one by one yourself.
Tailwind already purges unused css
@American Chinchilla Tailwind already purges unused css
i think they want to hyper optimize and have different bundles per page depending on whats used and the modules used
however this gets chaos quickly when you try to do it and share css, and tbh with compression gets even less useful
however this gets chaos quickly when you try to do it and share css, and tbh with compression gets even less useful
American Chinchilla
Ohhg okay. 👍
Yeah that makes sense. Hmm is it really worth it though?
for 99% of people... no
pagespeed for lots of cases isn't very representative
American Chinchilla
Yeah. I mean lighthouse i would focus more on image optimization, LCP etc these have more impact
Than unused css or js with modern frameworks
though if u do have the landing and app on same next.js i can see some argument to split up the css so initial load can be a smidge faster
@American Chinchilla Yeah. I mean lighthouse i would focus more on image optimization, LCP etc these have more impact
yeah, lighthouse is more intrested in raw first impression with no history with it + slowest internet ever
i'm a little confused with the unused JS, as that should be pretty well bundled - however if u only rarely use a module, you can use dynamic import with next/dynamic