build: chunk for highlight.js usage

spraakbanken · Jul 16, 2024 · f73be6f · f73be6f
1 parent d26a31b
commit f73be6f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/components/SyntaxHighlight.vue b/src/components/SyntaxHighlight.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+// Import lib dynamically for chunking
+const Highlightjs = defineAsyncComponent(
+  async () => (await import("@/highlight")).default.component,
+);
+
 defineProps<{
   code: string;
   language?: string;
 }>();
 </script>
 
 <template>
-  <highlightjs
+  <Highlightjs
     :code
     :language
     :autodetect="false"

diff --git a/src/main.ts b/src/main.ts
@@ -5,7 +5,6 @@ import router from "@/router/router";
 import App from "@/App.vue";
 import i18n from "@/i18n/i18n";
 import { formkit, formkitConfig } from "@/formkit";
-import highlight from "@/highlight";
 import { FontAwesomeIcon } from "@/fontawesome";
 import "@/index.css";
 
@@ -16,7 +15,6 @@ const app = createApp(App) //
   .use(pinia)
   .use(i18n)
   .use(formkit, formkitConfig)
-  .use(highlight)
   .component("icon", FontAwesomeIcon);
 
 // Use the Matomo plugin only if configured in env.