#5619·anki

Lazy-load MathJax in the editor

Author: aarianmmCreated Sep 16, 2026Updated Sep 16, 2026

Splitting the MathJax half out of #2563 so that issue can stay open for the CodeMirror half, which is a separate piece of work.

ts/lib/editable/mathjax.ts statically imports the full MathJax SVG bundle:

typescript
import "mathjax/es5/tex-svg-full";

That import is reachable from the editor entry point via NoteEditor.svelte -> decorated-elements.ts -> mathjax-element.svelte.ts -> Mathjax.svelte -> mathjax.ts, so every editor start pays for it even when the note contains no MathJax. Bundling the Mathjax.svelte component tree with ts/bundle_svelte.mjs at RELEASE=1 gives 2,355,877 bytes, of which 2,269,933 (2.16 MB) is MathJax.

#5171 already did the equivalent for the reviewer. The editor differs in two ways:

  1. It needs the SVG output (tex-svg-full.js), and only tex-chtml-full.js is currently copied into qt/_aqt/data/web/js/vendor/mathjax by MATHJAX_FILES in build/configure/src/web.rs.
  2. A plain dynamic import() does not help, because ts/bundle_svelte.mjs runs esbuild with a single outfile and no code splitting, so the import is inlined straight back into editor.js. I measured this: a module using import() bundles to 2,270,604 bytes versus 2,270,518 for the static version. Loading it with an injected script tag, the way _lazyLoadMathJax() in ts/reviewer/index.ts does, is what actually defers it.

Worth noting for whoever picks this up, since it's an easy thing to get wrong — a patch can look like it lazy-loads while changing nothing about what ships in the bundle.