starred/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-09-24 23:39:52 -05:00
Code Issues Packages Projects Releases Wiki Activity

perf: cache KaTeX module import as singleton across all renderer instances (#21880)

Browse Source 
* perf: cache KaTeX module import as singleton across all renderer instances

KatexRenderer.svelte dynamically imports katex, mhchem, and the CSS on every component mount. When a message contains multiple math expressions, this triggers redundant module resolution for each one. Move the import promise to a module-level singleton using Svelte's context='module' script block so it loads once and is shared across all KatexRenderer instances.

* Update KatexRenderer.svelte
This commit is contained in:
Classic298
2026-02-26 15:34:42 -06:00
committed by GitHub
parent 4654ecbf1b
commit 7ea6afdf95
1 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Messages/Markdown/KatexRenderer.svelte
+19 -7
View File
@@ -1,5 +1,21 @@
<script lang="ts">
<script lang="ts" context="module">
import type { renderToString as katexRenderToString } from 'katex';
// Module-level singleton: load katex once, share across all KatexRenderer instances
let katexRenderer: Promise<typeof katexRenderToString> | null = null;
function getKatexRenderer(): Promise<typeof katexRenderToString> {
if (!katexRenderer) {
katexRenderer = Promise.all([
import('katex'),
import('katex/contrib/mhchem'),
import('katex/dist/katex.min.css')
]).then(([katex]) => katex.renderToString);
}
return katexRenderer;
}
</script>
<script lang="ts">
import { onMount } from 'svelte';
export let content: string;
@@ -8,15 +24,11 @@
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;
renderToString = await getKatexRenderer();
});
</script>
{#if renderToString}
{@html renderToString(content, { displayMode, throwOnError: false })}
{/if}