ankitects/anki

Consider lazy-loading MathJax and CodeMirror in editor

Open

#2,563 opened on Jul 1, 2023

View on GitHub
 (4 comments) (1 reaction) (0 assignees)Rust (27,973 stars) (2,965 forks)batch import
editorhelp wantedweb frontend

Description

MathJax appears to account for about 1/3rd of our (2.9MB large!) editor bundle, and codemirror appears to be the second-largest contributor. If we were able to lazy-load these as required, we may be able to improve editor startup time for users who don't use MathJax or the HTML editor by default. We're also using the full MathJax bundle - maybe there's a way to lazy-load the required parts? A good starting point would be to just strip them out and compare editor loading time before and after, to see what sort of performance gains there are.

Contributor guide

Tech stack
javascript
Domain
frontendperformance
Issue type
performance
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
understanding of lazy loadingfamiliarity with JavaScript bundlers
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Start by examining the editor's webpack configuration to locate where MathJax and CodeMirror are bundled. Then implement dynamic imports for these libraries and compare bundle size and startup time using browser DevTools or webpack bundle analyzer. Document the performance improvements before submitting a PR.