From ef1cfc4202041ef11e9feecff5b13eed96b42550 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Fri, 24 Apr 2026 12:42:02 -0400 Subject: [PATCH 1/4] prebundle dev toolbar entrypoint in client optimizeDeps --- .changeset/toolbar-client-optimize-deps.md | 5 +++++ packages/astro/src/vite-plugin-environment/index.ts | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/toolbar-client-optimize-deps.md diff --git a/.changeset/toolbar-client-optimize-deps.md b/.changeset/toolbar-client-optimize-deps.md new file mode 100644 index 000000000000..a5815c551b53 --- /dev/null +++ b/.changeset/toolbar-client-optimize-deps.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Adds the dev toolbar entrypoint to the client `optimizeDeps.include` to prevent a full page reload on first navigation during dev diff --git a/packages/astro/src/vite-plugin-environment/index.ts b/packages/astro/src/vite-plugin-environment/index.ts index d2002a5e6de0..b7e2f35ea4cd 100644 --- a/packages/astro/src/vite-plugin-environment/index.ts +++ b/packages/astro/src/vite-plugin-environment/index.ts @@ -89,6 +89,7 @@ export function vitePluginEnvironment({ include: [ // For the dev toolbar 'astro > html-escaper', + 'astro/runtime/client/dev-toolbar/entrypoint.js', ], exclude: ['astro:*', 'virtual:astro:*', 'astro/virtual-modules/prefetch.js'], // Astro files can't be rendered on the client From 487073620c3e374db152233f44e37ec244ce0ee1 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Fri, 24 Apr 2026 13:01:27 -0400 Subject: [PATCH 2/4] fix e2e audit tests: reload so images are cached before audit runs --- packages/astro/e2e/dev-toolbar-audits.test.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/astro/e2e/dev-toolbar-audits.test.ts b/packages/astro/e2e/dev-toolbar-audits.test.ts index 5416897b4584..5ca0e2d05924 100644 --- a/packages/astro/e2e/dev-toolbar-audits.test.ts +++ b/packages/astro/e2e/dev-toolbar-audits.test.ts @@ -18,6 +18,8 @@ test.afterAll(async () => { test.describe('Dev Toolbar - Audits', () => { test('can warn about perf issues', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/audits-perf')); + // Reload so images are served from cache and are complete when the audit runs + await page.reload({ waitUntil: 'load' }); const toolbar = page.locator('astro-dev-toolbar'); const appButton = toolbar.locator('button[data-app-id="astro:audit"]'); @@ -49,6 +51,8 @@ test.describe('Dev Toolbar - Audits', () => { astro, }) => { await page.goto(astro.resolveUrl('/audits-perf-body-unscrollable')); + // Reload so images are served from cache and are complete when the audit runs + await page.reload({ waitUntil: 'load' }); const toolbar = page.locator('astro-dev-toolbar'); const appButton = toolbar.locator('button[data-app-id="astro:audit"]'); @@ -91,6 +95,8 @@ test.describe('Dev Toolbar - Audits', () => { astro, }) => { await page.goto(astro.resolveUrl('/audits-perf-absolute')); + // Reload so images are served from cache and are complete when the audit runs + await page.reload({ waitUntil: 'load' }); const toolbar = page.locator('astro-dev-toolbar'); const appButton = toolbar.locator('button[data-app-id="astro:audit"]'); From f1bb43d0188c8ec1123231a8d4428e2b3eb36425 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Fri, 24 Apr 2026 13:09:50 -0400 Subject: [PATCH 3/4] wait for images to load in audit instead of skipping them --- packages/astro/e2e/dev-toolbar-audits.test.ts | 6 ------ .../src/runtime/client/dev-toolbar/apps/audit/index.ts | 9 ++++++--- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/astro/e2e/dev-toolbar-audits.test.ts b/packages/astro/e2e/dev-toolbar-audits.test.ts index 5ca0e2d05924..5416897b4584 100644 --- a/packages/astro/e2e/dev-toolbar-audits.test.ts +++ b/packages/astro/e2e/dev-toolbar-audits.test.ts @@ -18,8 +18,6 @@ test.afterAll(async () => { test.describe('Dev Toolbar - Audits', () => { test('can warn about perf issues', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/audits-perf')); - // Reload so images are served from cache and are complete when the audit runs - await page.reload({ waitUntil: 'load' }); const toolbar = page.locator('astro-dev-toolbar'); const appButton = toolbar.locator('button[data-app-id="astro:audit"]'); @@ -51,8 +49,6 @@ test.describe('Dev Toolbar - Audits', () => { astro, }) => { await page.goto(astro.resolveUrl('/audits-perf-body-unscrollable')); - // Reload so images are served from cache and are complete when the audit runs - await page.reload({ waitUntil: 'load' }); const toolbar = page.locator('astro-dev-toolbar'); const appButton = toolbar.locator('button[data-app-id="astro:audit"]'); @@ -95,8 +91,6 @@ test.describe('Dev Toolbar - Audits', () => { astro, }) => { await page.goto(astro.resolveUrl('/audits-perf-absolute')); - // Reload so images are served from cache and are complete when the audit runs - await page.reload({ waitUntil: 'load' }); const toolbar = page.locator('astro-dev-toolbar'); const appButton = toolbar.locator('button[data-app-id="astro:audit"]'); diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/index.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/index.ts index e2a2f16d9c78..e7eb7fdf90e4 100644 --- a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/index.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/index.ts @@ -194,10 +194,13 @@ export default { return; } - // If the element is an image but not yet loaded, ignore it - // TODO: We shouldn't ignore this, because it is valid for an image to not be loaded at start (e.g. lazy loading) + // If the element is an image that hasn't loaded yet, wait for it so that + // position-based checks (e.g. above/below the fold) have accurate layout data. if (originalElement.nodeName === 'IMG' && !(originalElement as HTMLImageElement).complete) { - return; + await new Promise((resolve) => { + originalElement.addEventListener('load', () => resolve(), { once: true }); + originalElement.addEventListener('error', () => resolve(), { once: true }); + }); } audits.push({ From 1de85bb997135843e4db4d511f19921949f177a6 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Mon, 27 Apr 2026 11:06:13 -0400 Subject: [PATCH 4/4] Reword changeset to be user-facing --- .changeset/toolbar-client-optimize-deps.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/toolbar-client-optimize-deps.md b/.changeset/toolbar-client-optimize-deps.md index a5815c551b53..f5e9a148675f 100644 --- a/.changeset/toolbar-client-optimize-deps.md +++ b/.changeset/toolbar-client-optimize-deps.md @@ -2,4 +2,4 @@ 'astro': patch --- -Adds the dev toolbar entrypoint to the client `optimizeDeps.include` to prevent a full page reload on first navigation during dev +Fixes an unnecessary full page reload on first navigation during dev