Vue: Slow template compilation in dev mode - is this normal?

[dmitrybelyakov]

Version

2.5.17

Reproduction link

https://gist.github.com/dmitrybelyakov/c3274e8b6e6bf8dcfd97b4664dfed03b

Steps to reproduce

In dev mode with webpack, edit the component and let it be recompiled.
Comment out HTML blocks and incrementally un-comment them. Watch compile time for the component grow milliseconds to ~5 seconds.

What is expected?

Should be fairly quick.

What is actually happening?

Component takes around 5 seconds to compile.

---

So I have this component that has fairly reasonable amount of HTML in it, yet the compilation time grows quite a bit as more html elements are added. Most of my components are around 200ms to compile but this one takes 5 seconds on every change which makes it extremely annoying to work with.

Is this behaviour normal and can I take any measures to improve compilation time?

[dmitrybelyakov]

Additionally, what I discovered, is that the deeper I nest HTML elements the longer it takes to compile.
For example, compiling this component takes around 10 seconds: https://gist.github.com/dmitrybelyakov/ed64145624f42188372500018671eb0f

[dmitrybelyakov]

I was able to reproduce this behaviour using the latest vue-cli bootstrapped app.

[posva]

If the compile time grows, there must be something with either Vue loader or webpack directly but it needs to be investigated further.
If I recall correctly we cache template compilation in Vue BTW
Closing as this is not related directly to vue

[dmitrybelyakov]

@posva Well, i just bootstrapped the app using Vue CLI and got the same results. Do you think it's worth raising in the CLI repo?

[posva]

I think it's worth investigating further to see if it comes from Vue loader, the webpack config used in cli or webpack itself so the problem can be pointed at the right place

[dmitrybelyakov]

@posva Seems like it is the vue-loader like you said. The issue comes from component-compiler-utils using prettier library in dev mode which has this issue: prettier/prettier#4672

Thanks!