Change color of output bundle size (#60385)

When you have a gaint code base of next.js app, the output client side
loaded js bundle size could be large since most of them are functional,
it might not make sense to display yellow or red color to warn you that
your bundle is too large since they conatin the basic functionality.

We display the previous colored ones with opinionless bold white color
to highlight them

![image](https://github.com/vercel/next.js/assets/4800338/34814f2f-ff83-48b4-bad8-989031eff49e)

Closes NEXT-2017
Closes NEXT-2015
This commit is contained in:
Jiachi Liu 2024-01-09 15:05:41 +01:00 committed by GitHub
parent 782619ebf1
commit 14b6ae2e70
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -28,7 +28,15 @@ import '../server/require-hook'
import '../server/node-polyfill-crypto'
import '../server/node-environment'
import { green, yellow, red, cyan, bold, underline } from '../lib/picocolors'
import {
green,
yellow,
red,
cyan,
white,
bold,
underline,
} from '../lib/picocolors'
import getGzipSize from 'next/dist/compiled/gzip-size'
import textTable from 'next/dist/compiled/text-table'
import path from 'path'
@ -387,12 +395,7 @@ export async function printTreeView(
) {
const getPrettySize = (_size: number): string => {
const size = prettyBytes(_size)
// green for 0-130kb
if (_size < 130 * 1000) return green(size)
// yellow for 130-170kb
if (_size < 170 * 1000) return yellow(size)
// red for >= 170kb
return red(bold(size))
return white(bold(size))
}
const MIN_DURATION = 300