Vue is extremely slow to compile this HTML template in dev mode

Question

I am using a template app setup that I bootstrapped with vue CLI. I have one component that has 20 nested div tags. Compiling such a component in dev mode takes around 10 seconds. The deeper I nest the html elements the longer it takes and the time grows exponentially.

Is this behaviour normal? Is there a way to improve compilation time?

Here's an example: https://gist.github.com/dmitrybelyakov/ed64145624f42188372500018671eb0f

Answer 1

Answering my own question here: following the link to this SO post by Bennett Dams, some people already investigated this, and there is an issue with prettier library that gets used internally by vue-loader , specifically their template compiler utils. The issue has been reported to prettier team here and there , but it hasn't been fixed as of yet.

Because of that, vue template compiler comes with this issue out of the box. So if you nest ~30 html elements you can basically halt your compiler (only happens in dev mode).

Same goes for when you have less nested (~4-5) levels elements, but a few of them, in which case compilation gets progressively slower and reload/inject time suffers which makes waiting for your component to reload a pain.

I have reported this issue to vue-loader team here #1426 asking for a config option to disable use of prettier, so hopefully it will get looked at.

UPDATE: this should now be fixed in vue-loader via prettify config option that was added: https://github.com/vuejs/vue-loader/issues/1426

OLD SOLUTION:

For the moment though, the only fix is to edit node_modules/@vue/component-compiler-utils/dis/compileTemplate.js to comment out the line (should be around line 97) like so:

//code = prettier.format(code, { semi: false, parser: 'babylon' });