Stripped page assets (.lean.js) are not actually being stripped

[talawahtech]

Describe the bug
Vitepress uses a regex function to help generate "lean" versions of the js files used to load content into a page. The .lean.js files are stripped of the static page content and are used to avoid redundancy.

The regex function looks for a specific pattern generated by the Vue compiler, however there seems to be a number of scenarios where the code that is generated doesn't match this pattern.

Vitepress expects the code to look like this, with a single sting of text for all the HTML.

const _hoisted_1 = /*#__PURE__*/createStaticVNode("<p>With a new year upon us, we also have a new blog! In this post...

However, depending on the content of the .md file, sometimes it gets generated as a large number of createVNode functions instead of a single createStaticVNode function. e.g.

const _hoisted_1 = /*#__PURE__*/createVNode("p", { align: "center" }, [
  /*#__PURE__*/createVNode("img", {
    width: "200",
    src: _imports_0
  })
], -1 /* HOISTED */);
const _hoisted_2 = /*#__PURE__*/createVNode("p", null, "Today we are proud to announce the official release of Vue.js 3.0 \"One Piece\". This new major version of the framework provides improved performance, smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the framework.", -1 /* HOISTED */);
const _hoisted_3 = /*#__PURE__*/createVNode("hr", null, null, -1 /* HOISTED */);

When the generated code looks like that, the regex fails to match, and the .lean.js files ends up being exactly the same size as the corresponding .js file. This can be significant for content-heavy pages and it causes unnecessary processing on the client side.

To Reproduce
I encountered two easy ways to trigger the unwanted behavior, but there are likely many more. I used the Vue Blog as a reference to validate that the issue wasn't specific to my project.

1. Simple/Small pages. If you modify hello-2021.md So that it only contains the first heading and first paragraph the lean.js file ends up being identical to the full version.

2. Reference a local image file. If you modify vue-3-one-piece.md so that the image on the page points to the local logo.svg file, the corresponding .lean.js file goes from less than 1KB to almost 15KB

Change this:

<p align="center">
  <img width="200" src="https://user-images.githubusercontent.com/499550/93624428-53932780-f9ae-11ea-8d16-af949e16a09f.png">
</p>

To this:

<p align="center">
  <img width="200" src="/logo.svg">
</p>

Expected behavior
The posts_vue-3-one-piece.md.12345abcd.lean.js file should always be much smaller than posts_vue-3-one-piece.md.12345abcd.js

System Info

• vitepress version: v0.13.0
• vite version: v2.1.5
• Node version: v12.20.0
• OS version: Windows 10

[talawahtech]

FYI, inline SVG code seems to trigger the unwanted behavior as well.

[aberigle]

Hi @talawahtech, nice catch!

Have you been able to find any way to avoid this? It seems like I'm being affected by this too, but in my case my header is being drawn twice.

Thanks!

[talawahtech]

Hey @aberigle I didn't find a proper fix, I just worked around it by being careful to avoid scenarios that triggered the unwanted behavior.