next build first load JS colors

[daveteu]

When building, I often see First Load JS color in Red, despite me doing all kind of code optimization.

May I know what are the criterial for the first load JS to be shown as green or yellow instead of red?

Red color signifies critical, or error, and usually a page of red is not a good sign, which requires actions.

So, how are the colors determined? If it's purely base on size, showing it in red is definitely not the best idea as different projects are of different sizes.

[ethanryan]

@daveteu according to this reddit post:

It's just the size of the page.

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)
}

via the Next.js source:

next.js/packages/next/build/utils.ts

Lines 77 to 85 in 279ae19

	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)
	}

so:

< 130kb: green 🟢 
> 130-170kb: yellow 🟡 
> 170kb: red 🔴 

[alamenai]

For my case, I see all of the in white!

[icyJoseph]

#60385

[alamenai]

Thank you @icyJoseph but I'm using the version 14.2.0 and the changes ( colored sizes ) should be appeared,right?

[icyJoseph]

The commit, 14b6ae2 has been merged to canary there since early v14.0.5-canary.46 :) - first stable release v14.1.0