Skip to content
PirefactorWeb2 files · +59 −38

Replace Comark with marked and trim Shiki bundle in Svelte web app

Session from pi-web on Hugging Face by woxQAQ · MIT · condensed by Coders Talk

14msession
1interventions
GOAL

The developer wanted to cut bundle size in the pi-web Svelte app, which was bloated because the Comark markdown renderer pulled in full copies of Shiki, KaTeX and mermaid. They aimed to swap it for the lighter marked library and trim unused Shiki languages/themes.

  1. Prompt · +0
    Comark bundles full shiki, katex and beautiful-mermaid, blowing up our build size.
  2. Agent did · +0m
    Traced @comark/svelte's dependency chain, inspected its dist files, ran a build, and confirmed the vendor-mermaid chunk (2.9MB) pulls in full katex and shiki via Comark's bundled components.
  3. Prompt · +2m
    Comark doesn't give a better experience than marked either. Switch us back to marked.
  4. Agent did · +2m
    Rewrote MarkdownRenderer.svelte to use marked+DOMPurify instead of @comark/svelte, removed @comark/svelte and katex from package.json, added marked as a dependency, updated the lockfile, and verified with build:web and check:web.
  5. Prompt · +8m
    The web build still bundles a ton of shiki syntax files even though codeHighlight.ts doesn't import them all.
  6. Agent did · +8m
    Traced how each Shiki language grammar (markdown, svelte, vue, html) lazily pulls in a chain of embedded languages, confirmed the loader list in codeHighlight.ts was curated (22 langs) but markdown was a heavy embedder; disabled markdown highlighting and mapped md/mdx to plain text, then reran build:web and check:web successfully.
  7. Intervention · +14m
    Pointed out the agent's fix wasn't enough: the build output still showed a long list of Shiki theme files bundled in.
    Why: I could still see a pile of theme JS chunks (ayu, catppuccin, dracula, etc.) in web-dist even after the markdown language fix, so the bundle bloat clearly wasn't just about languages.
  8. Agent did · +14m
    Investigated Shiki's createBundledHighlighter/createSingletonShorthands setup and traced it to shiki/dist/themes.mjs, which bundles all built-in themes regardless of the curated language loaders; investigation was still in progress when a diagnostic shell command failed with a syntax error.
  9. Outcome · +14m
    Comark replaced by marked and markdown Shiki grammar disabled, but the root cause of the theme bloat (full Shiki theme bundle) was identified and left unfixed when the session ended on a failed diagnostic command.
VERDICT

Next time I'd start the first prompt by asking for a full audit of what each bundling layer (parser, languages, themes) actually pulls in, instead of chasing library swaps first. The correction that did the work was calling out that the agent's 'fixed' claim after the markdown-language change was premature — the theme bundle was still huge, and only pushing back got us to the real root cause in shiki's createBundledHighlighter.

I tried this · 0

Discussion · 0

How Builds work