CODEWITHSUNDEEP
performancecompilationvue.js
Codus
Codus

Reputation: 1473

Vue.js slow compiling

npm run dev executes very fast.

When I add 1000 rows of html (header) to a .vue file (template), it takes 9 minutes to compile.

Question:

Does vue.js not support such a lengthy template?

Is there any way to speed up?

<template>
  <header class="..." >
    ... (1000 rows)
  </header>
</template>

<script>
export default {
  name: 'Header'
}
</script>

Upvotes: 1

Views: 3838

Answers (2)

softloft
softloft

Reputation: 601

This is caused by prettier eslint.

Solution

Follow this steps to fix it.

  1. goto /node_modules/vue-loader/lib/template-compiler/index.js lines 78:81

  2. Change 

    if (!isProduction) {

      code = prettier.format(code, { semi: false })

    }

to

    // if (!isProduction) { 

      // code = prettier.format(code, { semi: false })

    // }

Upvotes: 1

haMzox
haMzox

Reputation: 2109

Because you are using a static template with static 1000 html elements. Use v-for!
What it will do is just compile (not run!) the Vue syntax on <template>.
Check this out as well: One Useful Link on Rows Rendering on Different Frameworks

Upvotes: 1

Related Questions