diff options
| -rw-r--r-- | .changeset/spotty-rice-shake.md | 7 | ||||
| -rw-r--r-- | packages/astro/src/core/build/generate.ts | 12 |
2 files changed, 17 insertions, 2 deletions
diff --git a/.changeset/spotty-rice-shake.md b/.changeset/spotty-rice-shake.md new file mode 100644 index 000000000..da913a320 --- /dev/null +++ b/.changeset/spotty-rice-shake.md @@ -0,0 +1,7 @@ +--- +'astro': minor +--- + +Adds color-coding to the console output during the build to highlight slow pages. + +Pages that take more than 500 milliseconds to render will have their build time logged in red. This change can help you discover pages of your site that are not performant and may need attention. diff --git a/packages/astro/src/core/build/generate.ts b/packages/astro/src/core/build/generate.ts index cc514e551..46fa13346 100644 --- a/packages/astro/src/core/build/generate.ts +++ b/packages/astro/src/core/build/generate.ts @@ -1,7 +1,7 @@ import fs from 'node:fs'; import os from 'node:os'; import { fileURLToPath } from 'node:url'; -import { bgGreen, black, blue, bold, dim, green, magenta } from 'kleur/colors'; +import { bgGreen, black, blue, bold, dim, green, magenta, red } from 'kleur/colors'; import PQueue from 'p-queue'; import type { OutputAsset, OutputChunk } from 'rollup'; import type { @@ -192,6 +192,8 @@ export async function generatePages(options: StaticBuildOptions, internals: Buil await runHookBuildGenerated({ config, logger }); } +const THRESHOLD_SLOW_RENDER_TIME_MS = 500; + async function generatePage( pageData: PageBuildData, ssrEntry: SinglePageBuiltModule, @@ -244,7 +246,13 @@ async function generatePage( const timeEnd = performance.now(); const timeChange = getTimeStat(prevTimeEnd, timeEnd); const timeIncrease = `(+${timeChange})`; - logger.info('SKIP_FORMAT', ` ${dim(timeIncrease)}`); + let timeIncreaseLabel; + if (timeEnd - prevTimeEnd > THRESHOLD_SLOW_RENDER_TIME_MS) { + timeIncreaseLabel = red(timeIncrease); + } else { + timeIncreaseLabel = dim(timeIncrease); + } + logger.info('SKIP_FORMAT', ` ${timeIncreaseLabel}`); prevTimeEnd = timeEnd; } } |