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;
+}