Lazy-load MathJax in the editor
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:
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:
- It needs the SVG output (
tex-svg-full.js), and onlytex-chtml-full.jsis currently copied intoqt/_aqt/data/web/js/vendor/mathjaxbyMATHJAX_FILESinbuild/configure/src/web.rs. - A plain dynamic
import()does not help, becausets/bundle_svelte.mjsruns esbuild with a singleoutfileand no code splitting, so the import is inlined straight back intoeditor.js. I measured this: a module usingimport()bundles to 2,270,604 bytes versus 2,270,518 for the static version. Loading it with an injected script tag, the way_lazyLoadMathJax()ints/reviewer/index.tsdoes, 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.
Source: ankitects/anki