Context
After PR #4 landed the note view, the production JS bundle grew from ~295KB to ~642KB (~198KB gzip). The bulk of the growth is highlight.js auto-registering every language via rehype-highlight, plus react-markdown + remark-gfm + rehype-highlight being pulled into the initial chunk.
The list view (/notes) is the entry point for anyone landing in Lens, and it doesn't need any of this. Loading 400KB of markdown-rendering code before the user clicks into a single note is wasted.
Proposed approach
Two levers, cheapest first:
- Route-level
React.lazy for /notes/:id (and later /notes/:id/edit). Suspense boundary in App.tsx. Keeps the list and auth flows on a skinny initial bundle.
- Swap to
highlight.js/lib/common (~35 commonly-used languages) instead of the default all-languages bundle. Noticeably smaller without losing the languages real notes actually use. If a user has an exotic language in a code fence it still renders, just without highlighting.
Together these should drop initial load back into the same neighborhood as before PR #4.
Success
- Initial JS chunk (uncached first paint of
/) back under ~350KB
/notes/:id and /notes/:id/edit render correctly (no regressions in manual smoke)- All tests still pass
Context
After PR #4 landed the note view, the production JS bundle grew from ~295KB to ~642KB (~198KB gzip). The bulk of the growth is
highlight.jsauto-registering every language viarehype-highlight, plusreact-markdown+remark-gfm+rehype-highlightbeing pulled into the initial chunk.The list view (
/notes) is the entry point for anyone landing in Lens, and it doesn't need any of this. Loading 400KB of markdown-rendering code before the user clicks into a single note is wasted.Proposed approach
Two levers, cheapest first:
React.lazyfor/notes/:id(and later/notes/:id/edit). Suspense boundary inApp.tsx. Keeps the list and auth flows on a skinny initial bundle.highlight.js/lib/common(~35 commonly-used languages) instead of the default all-languages bundle. Noticeably smaller without losing the languages real notes actually use. If a user has an exotic language in a code fence it still renders, just without highlighting.Together these should drop initial load back into the same neighborhood as before PR #4.
Success
/) back under ~350KB/notes/:idand/notes/:id/editrender correctly (no regressions in manual smoke)