perf(devtools): optimize shiki bundle size (#321)

* perf: only bundle needed shiki langs and themes Signed-off-by: ZTL-UwU <[email protected]> * perf: use xml for svg highlighting Signed-off-by: ZTL-UwU <[email protected]> --------- Signed-off-by: ZTL-UwU <[email protected]>
nuxt-modules · Feb 18, 2025 · 67427ff · 67427ff
1 parent 880167f
commit 67427ff
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 16 deletions.
diff --git a/client/app.vue b/client/app.vue
@@ -734,7 +734,7 @@ const currentPageFile = computed(() => {
                 SVG
               </h3>
             </template>
-            <OCodeBlock :code="debug?.svg.replaceAll('>', '>\n')" lang="html" />
+            <OCodeBlock :code="debug?.svg.replaceAll('>', '>\n')" lang="xml" />
           </OSectionBlock>
           <OSectionBlock>
             <template #text>

diff --git a/client/components/OCodeBlock.vue b/client/components/OCodeBlock.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { BundledLanguage } from 'shiki'
 import { computed } from 'vue'
 import { renderCodeHighlight } from '../composables/shiki'
 
 const props = withDefaults(
   defineProps<{
     code: string
-    lang?: BundledLanguage
+    lang: 'json' | 'xml'
     lines?: boolean
     transformRendered?: (code: string) => string
   }>(),

diff --git a/client/composables/shiki.ts b/client/composables/shiki.ts
@@ -1,27 +1,29 @@
 import type { MaybeRef } from '@vueuse/core'
-import type { BundledLanguage, Highlighter } from 'shiki'
-import { createHighlighter } from 'shiki'
+import type { HighlighterCore } from 'shiki'
+import { createHighlighterCore } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
 import { computed, ref, toValue } from 'vue'
 import { devtools } from './rpc'
 
-export const shiki = ref<Highlighter>()
+export const shiki = ref<HighlighterCore>()
 
 export async function loadShiki() {
-  // Only loading when needed
-  shiki.value = await createHighlighter({
+  shiki.value = await createHighlighterCore({
     themes: [
-      'vitesse-dark',
-      'vitesse-light',
+      import('@shikijs/themes/vitesse-light'),
+      import('@shikijs/themes/vitesse-dark'),
     ],
     langs: [
-      'html',
-      'json',
+      import('@shikijs/langs/xml'),
+      import('@shikijs/langs/json'),
     ],
+    engine: createJavaScriptRegexEngine(),
   })
+
   return shiki.value
 }
 
-export function renderCodeHighlight(code: MaybeRef<string>, lang: BundledLanguage) {
+export function renderCodeHighlight(code: MaybeRef<string>, lang: 'json' | 'xml') {
   return computed(() => {
     const colorMode = devtools.value?.colorMode || 'light'
     return shiki.value!.codeToHtml(toValue(code) || '', {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,3 +1,3 @@
 packages:
-  - .playground
+  - playground
   - client