Prebundle dev toolbar entrypoint in client environment

.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

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<void>((resolve) => {
+					originalElement.addEventListener('load', () => resolve(), { once: true });
+					originalElement.addEventListener('error', () => resolve(), { once: true });
+				});
 			}
 
 			audits.push({

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