Improve build perf (#2697)

* improve md perf

* chore: add changesets

Co-authored-by: Nate Moore <nate@skypack.dev>

.changeset/orange-coins-whisper.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/markdown-remark': patch
+---
+
+Improve performance by optimizing calls to `getHighlighter`

.changeset/short-rats-double.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Improve build performance by processing `ssrPreload` in serial rather than in parallel

packages/astro/src/core/build/page-data.ts

@@ -35,8 +35,7 @@ export async function collectPagesData(opts: CollectPagesDataOptions): Promise<C
 	// NOTE: This enforces that `getStaticPaths()` is only called once per route,
 	// and is then cached across all future SSR builds. In the past, we've had trouble
 	// with parallelized builds without guaranteeing that this is called first.
-	await Promise.all(
+	for (const route of manifest.routes) {
-		manifest.routes.map(async (route) => {
 		// static route:
 		if (route.pathname) {
 			allPages[route.component] = {
@@ -63,7 +62,7 @@ export async function collectPagesData(opts: CollectPagesDataOptions): Promise<C
 						throw err;
 					}),
 			};
-				return;
+			continue;
 		}
 		// dynamic route:
 		const result = await getStaticPathsForRoute(opts, route)
@@ -116,8 +115,7 @@ export async function collectPagesData(opts: CollectPagesDataOptions): Promise<C
 				viteServer,
 			}),
 		};
-		})
+	}
-	);
 
 	return { assets, allPages };
 }

packages/markdown/remark/src/remark-shiki.ts

@@ -30,16 +30,25 @@ export interface ShikiConfig {
 	wrap?: boolean | null;
 }
 
-const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
+/**
-	const highlighter = await getHighlighter({ theme });
+ * getHighlighter() is the most expensive step of Shiki. Instead of calling it on every page,
+ * cache it here as much as possible. Make sure that your highlighters can be cached, state-free.
+ */
+const highlighterCache = new Map<string, shiki.Highlighter>();
 
+const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
+	const cacheID: string = typeof theme === 'string' ? theme : theme.name;
+	let highlighter = highlighterCache.get(cacheID);
+	if (!highlighter) {
+		highlighter = await getHighlighter({ theme });
+		highlighterCache.set(cacheID, highlighter);
+	}
 	for (const lang of langs) {
 		await highlighter.loadLanguage(lang);
 	}
-
 	return () => (tree: any) => {
 		visit(tree, 'code', (node) => {
-			let html = highlighter.codeToHtml(node.value, { lang: node.lang ?? 'plaintext' });
+			let html = highlighter!.codeToHtml(node.value, { lang: node.lang ?? 'plaintext' });
 
 			// Replace "shiki" class naming with "astro" and add "data-astro-raw".
 			html = html.replace('<pre class="shiki"', '<pre data-astro-raw class="astro-code"');