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
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' });