I am using a template app setup that I bootstrapped with vue CLI. I have one ponent that has 20 nested div tags. Compiling such a ponent 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 pilation time?

Here's an example:

I am using a template app setup that I bootstrapped with vue CLI. I have one ponent that has 20 nested div tags. Compiling such a ponent 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 pilation time?

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

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Feb 10, 2020 at 13:37 dmitrybelyakov asked Nov 9, 2018 at 13:30 dmitrybelyakovdmitrybelyakov 3,86422 gold badges2525 silver badges3030 bronze badges 6

• 2 If you're using Prettier, here is your solution: stackoverflow./questions/50752427/… btw: Using 10 or more divs is a good sign to start putting some stuff in independent ponents. – Bennett Dams Commented Nov 9, 2018 at 13:47
• @BennettDams amazing! I wasn't using prettier, but vue-loader's template piler was. And this is exactly the issue. Thanks! – dmitrybelyakov Commented Nov 9, 2018 at 14:09
• Since you have your answer you should answer your own question. – Simon Hyll Commented Nov 14, 2018 at 3:38
• @SimonHyll not sure what you mean here. Shall I copy what Bennett said into an answer and accept it? – dmitrybelyakov Commented Nov 14, 2018 at 9:42
• Basically, yea. Well, technically I guess he could also do it, but in case he doesn't do it you should answer your own question with his answer. StackOverflow wants questions to have answers so that other people finding this page will easily be able to find their answer, they don't care who answers. In fact they support you asking and answering your own question in case you just wanna share information with people. – Simon Hyll Commented Nov 15, 2018 at 2:07

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

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 piler 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 piler es with this issue out of the box. So if you nest ~30 html elements you can basically halt your piler (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 pilation gets progressively slower and reload/inject time suffers which makes waiting for your ponent 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./vuejs/vue-loader/issues/1426

OLD SOLUTION:

For the moment though, the only fix is to edit node_modules/@vue/ponent-piler-utils/dis/pileTemplate.js to ment out the line (should be around line 97) like so:

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