Merge pull request #17496 from ShirasawaSama/patch-16

feat: Dynamically load katex to improve first-screen loading speed (-630KB)

src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte

@@ -1,10 +1,22 @@
 <script lang="ts">
-	import katex from 'katex';
-	import 'katex/contrib/mhchem';
-	import 'katex/dist/katex.min.css';
+	import type { renderToString as katexRenderToString } from 'katex';
+	import { onMount } from 'svelte';
 
 	export let content: string;
 	export let displayMode: boolean = false;
+
+	let renderToString: typeof katexRenderToString | null = null;
+
+	onMount(async () => {
+		const [katex] = await Promise.all([
+			import('katex'),
+			import('katex/contrib/mhchem'),
+			import('katex/dist/katex.min.css'),
+		]);
+		renderToString = katex.renderToString;
+	});
 </script>
 
-{@html katex.renderToString(content, { displayMode, throwOnError: false })}
+{#if renderToString}
+	{@html renderToString(content, { displayMode, throwOnError: false })}
+{/if}

src/lib/utils/marked/katex-extension.ts

@@ -1,5 +1,3 @@
-import katex from 'katex';
-
 const DELIMITER_LIST = [
 	{ left: '$$', right: '$$', display: true },
 	{ left: '$', right: '$', display: false },