Built tool first page load color coded
Answered
Japanese anchovy posted this in #help-forum
Japanese anchovyOP
In older version of nextjs the build tool would color code the first load page size
const getPrettySize = (_size: number): string => {
const size = prettyBytes(_size)
// green for 0-130kb
if (_size < 130 * 1000) return chalk.green(size)
// yellow for 130-170kb
if (_size < 170 * 1000) return chalk.yellow(size)
// red for >= 170kb
return chalk.red.bold(size)
}
This is not the case for me (at least in webstorm) for next 14+. was this removed?
const getPrettySize = (_size: number): string => {
const size = prettyBytes(_size)
// green for 0-130kb
if (_size < 130 * 1000) return chalk.green(size)
// yellow for 130-170kb
if (_size < 170 * 1000) return chalk.yellow(size)
// red for >= 170kb
return chalk.red.bold(size)
}
This is not the case for me (at least in webstorm) for next 14+. was this removed?
Answered by riský
anyway, here is the pr: https://github.com/vercel/next.js/pull/60385 (they didnt like it being opinionated is from what i gather)
27 Replies
@Japanese anchovy In older version of nextjs the build tool would color code the first load page size
const getPrettySize = (_size: number): string => {
const size = prettyBytes(_size)
// green for 0-130kb
if (_size < 130 * 1000) return chalk.green(size)
// yellow for 130-170kb
if (_size < 170 * 1000) return chalk.yellow(size)
// red for >= 170kb
return chalk.red.bold(size)
}
This is not the case for me (at least in webstorm) for next 14+. was this removed?
i feel like it was because it didnt nessarily mean that much... like you could be building dschboard and tha slightly larger is fine + internet speed is quite good now - even on mobile
anyway, here is the pr: https://github.com/vercel/next.js/pull/60385 (they didnt like it being opinionated is from what i gather)
Answer
@riský i feel like it was because it didnt nessarily mean that much... like you could be building dschboard and tha slightly larger is fine + internet speed is quite good now - even on mobile
Yeah often times when I was showing people at work things, they would hyper fixate on the fact that its red, which was silly.
@Jboncz Yeah often times when I was showing people at work things, they would hyper fixate on the fact that its red, which was silly.
Japanese anchovyOP
I feel that 100%
Thanks friends-
@riský anyway, here is the pr: <https://github.com/vercel/next.js/pull/60385> (they didnt like it being opinionated is from what i gather)
what happens when the baseline smallest possible bundle size shoots from 50kB (v12) to 90kB (v14)
in v12's standard it's almost impossible to get green in v14
oh yeah each update kept on adding a few kB for me, and sometimes i thought i made my code so worce with it adding enough to get the yellow and i was sad
Japanese anchovyOP
ITS FINEEEE THIS IS FINE
Sometimes a screenshot as part of a change would get seen by management and they would be like red is bad right? why so much red?
Japanese anchovyOP
the last time i optimized a next app was v12... are all the trick generally the same?
Hrmmm did v12 have app router? lol
I cant remember tbh
Japanese anchovyOP
still pages
no app
Then there is a whole lot you 'can' do....
Depends on your app, if its heavy client side interaction then probably not a whole lot.
Japanese anchovyOP
load data after page load, lazy load charts and graphs, etc ?
Well you can now load the data server side and serve it straight away.
Japanese anchovyOP
man i gotta reread these docs then
I myself work on internal tooling, so its very very heavy client side, I just slap 'use client' on top of most of my components.... dont tell anyone
If your looking to make it as efficient as possible yes, you should read up on server components.... and server actions for that matter (read up on these regardless they are NEAT)....
@Japanese anchovy thanks will do!
Server actions are magical 😂 No more creating rest api endpoints for everything in creation... essentially dynamically generated api routes, its SUPPOSE to be only for mutating data.... but... that never stopped me