From a62345fd182ae4886d586c8406ed8f3e5f942730 Mon Sep 17 00:00:00 2001 From: Emanuele Stoppa Date: Wed, 31 Jul 2024 11:37:08 +0100 Subject: [PATCH] feat: log slow pages in red (#11507) * fix: log slow pages in red * apply feedback * chore: update based on feedback * Update .changeset/spotty-rice-shake.md Co-authored-by: Sarah Rainsberger --------- Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- .changeset/spotty-rice-shake.md | 7 +++++++ packages/astro/src/core/build/generate.ts | 12 ++++++++++-- 2 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 .changeset/spotty-rice-shake.md diff --git a/.changeset/spotty-rice-shake.md b/.changeset/spotty-rice-shake.md new file mode 100644 index 0000000000..da913a3201 --- /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 cc514e551c..46fa133464 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; } }