Vue.js slow compiling

Question

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>

Answer 1

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

Answer 2

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

    // }