perf: cache shiki

[Barbapapazes]

Description

Hello 👋,

I'm building my website, https://soubiran.dev, with VitePress.

At first, it was fast but as I added more content and more data loaders, it became slower and slower to build. Today, it takes around 4 minutes to build the website and each time I add a new page, it adds 10 seconds to the build time.

So I decided to investigate to find the annoying issue. At the same time, I had this warning: Shiki is supposed to be used as a singleton, consider refactoring your code to cache your highlighter instance;.

I moved all my content to a fresh VitePress project and I found that the speed build was back to normal. In my project, soubiran.dev, I started to play with DEBUG=vitepress:md and I discover that some pages took 27s to build while some was under 100ms. This led me to the conclusion that the issue was related to the markdown content and potentially the parser: MarkdownIt.

With the warning in mind, I quickly understand the highlighter creation was the issue: https://github.com/vuejs/vitepress/blob/main/src/node/markdown/markdown.ts#L208

I also discover that every time a createContentLoader is used, a new instance of MarkdownIt is created: https://github.com/vuejs/vitepress/blob/main/src/node/contentLoader.ts#L129

So I try to patch VitePress in my project by caching the highlighter instance.

Before, in the Cloudflare Pages CI: more than 4 minutes to build the website.
After, in the Cloudflare Pages CI: 47 seconds to build the website.

related to https://x.com/soubiran_/status/1851189188634288614

This also improve significantly the dev startup of the project.

Unfortunately, this project is private but I can happily invite maintainers if needed.

Linked Issues

Additional Context

---

Tip

The author of this PR can publish a preview release by commenting /publish below.

[Barbapapazes]

While I was writing this PR, I was wondering if we couldn't go further and cache the MardownIt instance?

So I try but it did no improve perf.

[brc-dd]

Actually the issue is we need to reload the highlighter instance and destroy the old one too in certain cases like reloading config file (because a user might change shiki's theme and expect it to reload). But yeah I'm seeing perf degradation with both cold start (and config reload).

If possible, can you add me temporarily with read-only access on the repo? You can dm me on discord if you've any concerns (I'm in https://chat.vuejs.org/ - #vitepress channel).

But from what you've told, I believe the issue in your case is because of using createMarkdownRenderer in data loader (similar to note in #4300 (comment)). We probably should provide better API instead of createMarkdownRenderer, or maybe an option to re-use the instance (enabled by default, but disabled inside our vite plugin so that on config reload it still creates and caches a new instance but inside data loaders, etc. it can re-use the cached one).

---

Ok looks like Anthony added the dispose function - shikijs/shiki#707 - this should be used in case of clearing cache (config reloads). It wasn't there when that memory leak was initially fixed (and that singleton warning was added).

[brc-dd]

/publish

[pkg-pr-new]

pnpm add https://pkg.pr.new/vitepress@4321

commit: 4c510b4

[Barbapapazes]

/publish

I've updated soubiran.dev and this PR is in production! (build time: 30 seconds on CF, 13 seconds on my computer and a way better dev start time)

[Barbapapazes]

I just update my dependencies, and now, it's under 10 seconds 🥳