Nuxt.js: NUXT takes a long time to build (up to 6 minutes!)

[amlife180]

Version

v1.4.0

Reproduction link

https://jsfiddle.net/9r7Lc18a/1/

Steps to reproduce

The moment I start importing my template to NUXT, the build process (npm run dev ) start slowing down from 5s up to 6 minutes! which makes it impossible to use!

I tried separating the code (Header, Body and Footer) with less than 500 lines in each vue component but that did not help with the build process.

I also have tried the new build nuxt-edge without luck, same behavior.

What is expected ?

faster build times, it should not take more than few seconds to build. I'm using the same theme with react / web-pack and it works fine.

What is actually happening?

I'm using Create-nuxt-app template and it works fine until I start adding my HTML template to it.

_{This bug report is available on Nuxt community (#c7307)}

[herrdu]

mark

[Developerayo]

@amlife180 your JS and CSS is empty?

[Developerayo]

@amlife180 can you update and write your css so it would be easier to understand, ring now its just plane text and links...

[amlife180]

Hello Developerayo,

I did not see a point of adding the JS and CSS as I'm able to produce the issue with basic HTML code. I also tried adding JS, CSS and link all images but that did not help at all.

If you just try to copy some my of HTML code, let us say the header part,

<header> ..... </header> to your NUXT App and save it it, it will take forever to compile the code

[aldarund]

Same happens on edge.
Tried that whole html and it didnt compile in 20 minutes, wasnt waiting longer.
Just header section 10+ didnt compile.

[aldarund]

Here is 77 lines of html that is compiles more than 5 minutes on nuxt-edge. During 4.30m or so it use only 5% of cpu and memory use stay exactly same at ~160mb. That doesnt happen normally when project compiled without this html memory grows steadily. If remove top header tag compile time goes down to 3min ( still a lot ). So the more html tags in tree - the longer nuxt compiles it. Each new top level tag adds like 2min.
There clearly some performance hog in nuxt or some underlying library..
https://codepen.io/aldarund/pen/RJEXvG

[aldarund]

https://github.com/vuejs/vue-loader/issues/1352

[Developerayo]

Check this out: https://github.com/Developerayo/awesome-nuxtjs

[Developerayo]

@aldarund how did you run it on your "https://codepen.io/aldarund/pen/RJEXvG"

[aldarund]

@Developerayo its not related to nuxt. You can create empty new vue project with @vue/cli and replace app.vue with that html from codepen and u will get 5+ min compile time. Here is empty project with that 1 file that was created via vue/cli -> https://www.dropbox.com/s/crjqyk7uq23bn31/my-projectx.zip?dl=0

[Developerayo]

lol @aldarund now i see. Will check for possible errors. Will get back to you this evening with a solution. Trust me :)

[DeanKamali]

Any update on this issue?

Thanks

[aldarund]

@DeanKamali not a nuxt fault. Blame prettier , vote here and comment , maybe it will make any difference...
https://github.com/prettier/prettier/issues/4784

[cnlawrence]

Is there an update with nuxt or prettier? 13 minute build here.

Has anyone successfully reverted prettier back to a previous version to resolve the issue?

[DeanKamali]

@cnlawrence I had to give up on nuxt for the time being and started using next.js instead : (

[manniL]

I've tested the build times with a fresh project and the latest nuxt-edge build and they are decent! (~5-7 seconds)

(Only @nuxtjs/pwa was included).

Build time increases with extra plugins like: sass, typescript, prettier and so on but that'll happen in any build chain.

In this special case, the cause for high loading times is
prettier/prettier#4784 which affects all vue-apps with nested HTML.

[cmty[bot]]

This bug-report has been fixed by @manniL.

Build time looks okay in latest nuxt-edge release

[Developerayo]

True.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.