Hello Vue team,

What problem does this feature solve?

If you compile in-DOM HTML on runtime, Lighthouse reports "Long Task" warning, because compilation takes more time than 50ms, which is considered as "Long Task". If we are talking about 2000 - 3000 nodes big website, this can go high as 400 - 600ms or even higher, which generates a poor ~50% score on Lighthouse Scoring. According to documentation, this should be solved by v-pre directive, however, it seems that it has no real impact on the compilation time on static elements.

Here is an example: Consider long list - around 1000 <li> nodes as seen here: https://jsfiddle.net/ryc659aw/ It is true, that the <li> elements are not "compiled", so the raw mustache tags are displayed, however, it still kind of loops through all elements during the parsing, which costs ~0.2ms per element.

This issue was already discussed in Vue 2 Github issue page: https://github.com/vuejs/vue/issues/10913, however it was closed with statement that:

This won't be an issue with Vue 3

What does the proposed API look like?

If v-pre cannot be currently optimized to ensure that also parser skips the all static element, I would like to see some new directive like v-raw or v-skip or v-inner-html that would skip the parsing of the element and/or at least all its children elements and during the hydratation, it would just use innerHtml property and doesn't recreate all inner elements one by one.

Thank you very much for taking this into consideration.

Vue still needs to parse it to create the JS function that renders the VDOM

The solution is to pre compile your templates with Vite or Webpack.

Please, next time consider using the forum, the Discord server or StackOverflow for questions first. But feel free to come back and open an issue if it turns out to be a bug 🙂

Thanks for the reply and provided solution.

However, the problem is when the static content is coming from CMS therefore it is dynamic. Then you cannot pre-compile it, unless you are using Headless CMS and consuming the content via SSR. For that you would need completely different architecture.

Currently the weighting of TBT in lighthouse score is 30% which makes practically impossible to reach overall score > 90 with Vue.js when you got only 50 points here and all other metrics could even have perfect 100 score - that would make 85 points in overall. That's why I considered it as something which would need to be optimized (I know it's not a bug), because Core Web Vital metrics are now officially used for ranking pages by Google and shifting from classic CMS approach to SSR would cost a lot of effort.