Perf: reuse Shiki highlighters per theme/lang (#3130)

* reuse Shiki highlighters per theme/lang

* chore: adding changeset

.changeset/eleven-guests-rhyme.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Updates `<Code />` component to cache and reuse Shiki highlighters

packages/astro/components/Code.astro

@@ -1,6 +1,6 @@
 ---
 import type * as shiki from 'shiki';
-import { getHighlighter } from 'shiki';
+import { getHighlighter } from './Shiki.js';
 
 export interface Props {
 	/** The code to highlight. Required. */

packages/astro/components/Shiki.js

@@ -0,0 +1,22 @@
+import { getHighlighter as getShikiHighlighter } from 'shiki';
+
+// Caches Promise<Highligher> for reuse when the same theme and langs are provided
+const _resolvedHighlighters = new Map();
+
+function stringify(opts) {
+    // Always sort keys before stringifying to make sure objects match regardless of parameter ordering
+    return JSON.stringify(opts, Object.keys(opts).sort());
+}
+
+export function getHighlighter(opts) {
+    const key = stringify(opts);
+
+    // Highlighter has already been requested, reuse the same instance
+    if (_resolvedHighlighters.has(key)) { return _resolvedHighlighters.get(key) }
+
+    // Start the async getHighlighter call and cache the Promise
+    const highlighter = getShikiHighlighter(opts);
+    _resolvedHighlighters.set(key, highlighter);
+
+    return highlighter;
+}