Watch is too slow about components

[pi0]

Hi :) v1.0.7 contains patch to make global/no-treeshaking possible. You can try it by using yarn upgrade nuxt (or yarn upgrade @nuxt/components if directly installed) and use:

// nuxt.config
export default {
  components: [ { path: '~/components', global: 'dev' } ]
}

This will use global mode for development only without webpack-loader and tree-shaking. Just be aware that there might be conditions (like using :is) that components not being auto-loader for production using loader.

[christopher4lis]

Just wanted to follow up on this issue and see if a fix is up and coming. Have the same issue as everyone else right now—seems that my dev build time has increased from 1s or less to 15s on average.

[paulvonber]

Seems that you have something fundamentally wrong in this module I tried "the old one" '@nuxtjs/global-components', and it runs like a charm for the same setup

Only disadvantage of the last one that you need .global. on the file names, so I'll stick with the old one until this new thingy will gain more performance :)

[pi0]

Hi. Sorry for the late update. Indeed recompiling of all components would be the issue. We were discussing with @kevinmarrec. Probably it worth if we only use loader for tree-shaking in production mode.

For local we are module is already generating global components.js (#14) to replicate global mode behavior. Will keep you updated :)

[christopher4lis]

@pi0 so far works great, almost an instant refresh under a second compared to 15 seconds beforehand. Huge help towards productivity with the fix.

[TakCastel]

For the record,

I had the same issue with nuxt 2.14 and components v1.
The build time was 30+ seconds on watch

Moved to nuxt 2.15 and components v2,

I can say it works perfectly :

✔ Client
  Compiled successfully in 452.20ms

✔ Server
  Compiled successfully in 696.20ms

Thank you @pi0

[vrtxims]

@pi0 Hey! So is there something we can do about it, or this is the expected workflow (to recompile every component on each modification if my understanding is correct)?

[asmeeee]

@andrei-scripcaru setting it to null is a solution but does not help because the components are not loaded anymore and i end up with unregistered comps

Are you sure that you configured the module like this?

// nuxt.config
export default {
  components: [ { path: '~/components', global: 'dev' } ]
}

[njbarrett]

I seem to have issues with using global: 'dev' as mentioned above when using the <client-only> tag.
Removing global dev fixes the issue, and so does removing client only, but I need that.

Vue reports an SSR hydration error, and then browser errors:

sentry.client.js?5240:32 TypeError: Cannot read property 'toLowerCase' of undefined
    at emptyNodeAt (vue.runtime.esm.js?2b0e:5867)

[podlebar]

i can just confirm that with 100+ components and most of them lazy loaded it takes ages..
also this config:
export default { components: [ { path: '~/components', global: 'dev' } ] }

it does not make it faster.. the only solution was to set components to false and import the components the old school way.. build time went down from 35sec to 3sec..

[pi0]

We are aware of this issue. Assigned myself to check ASAP (~> #123)

I seem to have issues with using global: 'dev' as mentioned above when using the tag.
Removing global dev fixes the issue, and so does removing client only, but I need that.

@njbarrett Do you mind making an issue with example/reproduction for this? It is not related to slow build with default mode...

[kevinmarrec]

@paulvonber What means slow to you ?

I'm using it for big projects with ~180 components and it doesn't really feel slow

[paulvonber]

and with classic imports was something like 2 seconds

[pi0]

@paulvonber Would you please try with yarn nuxt build --profile and send profiling report for loaders?

[paulvonber]

@pi0 sure

Client:

Stats by Loader
Loader Requests Time Time/Request Description
babel-loader 1329 13s 10ms Babel-loader
vuetify-loader 2142 12s 6ms Vuetify-loader
vue-loader 3108 18s 6ms Vue-loader
vue-style-loader 145 76ms 525μs Vue-style-loader
css-loader 623 10s 16ms Css-loader
postcss-loader 623 10s 16ms Postcss-loader
sass-loader 617 10s 16ms Sass-loader
file-loader 34 120ms 4ms File-loader
url-loader 473 3s 5ms Url-loader
img-loader 349 2s 5ms Img-loader
Total 9443 1m

Server:

Stats by Loader
Loader Requests Time Time/Request Description
babel-loader 1435 10s 7ms Babel-loader
vuetify-loader 2231 11s 5ms Vuetify-loader
vue-loader 3148 12s 4ms Vue-loader
vue-style-loader 145 85ms 584μs Vue-style-loader
css-loader 542 6s 11ms Css-loader
postcss-loader 542 6s 11ms Postcss-loader
sass-loader 533 6s 11ms Sass-loader
file-loader 19 6ms 301μs File-loader
url-loader 413 2s 5ms Url-loader
img-loader 353 2s 5ms Img-loader
Total 9361 55s

[pi0]

Thanks @paulvonber. As loader is subset of vue-loader, numbers (18s vs 1m total) seems reasonable. Any chance you can also profile without this module to compare? (Also i can see you are using vuetify-loader which is doing same logic)

[paulvonber]

@pi0 tried to rollback it's a bit tricky for me but here is the numbers, doesn't seem to be a big difference here, but really watching became nightmare with jump from 2s to 30s

Client:

Stats by Loader
Loader Requests Time Time/Request Description
babel-loader 1424 9s 6ms Babel-loader
vuetify-loader 1971 13s 6ms Vuetify-loader
vue-loader 3071 20s 7ms Vue-loader
vue-style-loader 149 78ms 523μs Vue-style-loader
css-loader 735 11s 14ms Css-loader
postcss-loader 735 11s 14ms Postcss-loader
sass-loader 728 10s 14ms Sass-loader
file-loader 30 93ms 3ms File-loader
url-loader 362 2s 6ms Url-loader
img-loader 290 2s 7ms Img-loader
Total 9495 1m

Server:

Stats by Loader
Loader Requests Time Time/Request Description
babel-loader 1432 11s 8ms Babel-loader
vuetify-loader 2218 19s 9ms Vuetify-loader
vue-loader 3215 26s 8ms Vue-loader
vue-style-loader 149 114ms 762μs Vue-style-loader
css-loader 611 9s 15ms Css-loader
postcss-loader 611 9s 15ms Postcss-loader
sass-loader 604 9s 15ms Sass-loader
file-loader 16 27ms 2ms File-loader
url-loader 391 3s 8ms Url-loader
img-loader 328 3s 9ms Img-loader
Total 9575 1m

[vrtxims]

Hi there, running the app with nuxt-ts in dev mode really takes a lot to recompile everything on any little change in the components :(

✔ Client
  Compiled successfully in 23.61s

✔ Server
  Compiled successfully in 23.97s

This is my output for nuxt-ts build --profile:

Profile results for Client

> Stats by Ext

Ext    Requests  Time   Time/Request  Description

js     475       3s     7ms           JavaScript files

vue    1540      13s    9ms           Vue Single File components

css    55        163ms  3ms           css files

Total  2070      17s

> Stats by Loader

Loader            Requests  Time  Time/Request  Description

babel-loader      991       6s    7ms           Babel-loader

vue-loader        2435      22s   9ms           Vue-loader

vue-style-loader  59        27ms  458μs         Vue-style-loader

css-loader        382       9s    23ms          Css-loader

postcss-loader    382       9s    23ms          Postcss-loader

Total             4249      46s


Profile results for Server

> Stats by Ext

Ext    Requests  Time  Time/Request  Description

js     456       2s    5ms           JavaScript files

vue    1732      14s   8ms           Vue Single File components

css    31        57ms  2ms           css files

Total  2219      16s

> Stats by Loader

Loader            Requests  Time  Time/Request  Description

babel-loader      964       5s    5ms           Babel-loader

vue-loader        2691      21s   8ms           Vue-loader

vue-style-loader  57        29ms  503μs         Vue-style-loader

css-loader        397       7s    18ms          Css-loader

postcss-loader    397       7s    18ms          Postcss-loader

Total             4506      40s

[emilsgulbis]

Hi. Sorry for the late update. Indeed recompiling of all components would be the issue. We were discussing with @kevinmarrec. Probably it worth if we only use loader for tree-shaking in production mode.

For local we are module is already generating global components.js (#14) to replicate global mode behavior. Will keep you updated :)

Maybe it's good idea to have treeShake as option on nuxt.config.js?

[asmeeee]

@pi0 Hey! Sorry to bother, but is there any chance to make us happy on this one?

[christopher4lis]

I'd be down to give this a shot since it doesn't seem like a fix is coming. I'd prob just need a quick overview of how the repo works so I don't affect other pieces of core functionality. Anyone have any resources or links to get started?

[christopher4lis]

Thank you @pi0! Looking forward to trying it out and seeing how you implemented it within @nuxt/components.

[christopher4lis]

@pi0, looks like nuxt 2.13.3 still uses @nuxt/components v 1.0.6. Going to install directly for now, but just a heads up!

[pi0]

Nuxt dependency constraint is caret so either doing fresh install or yarn upgrade nuxt will update sub deps to the latest non major :) Looking forward for feedbacks and thanks ❤️

[paulvonber]

@pi0 seems all as expected now, no more waiting time for the watch. Thanks a lot!

[Imad-Abdulkarim-offmade]

@pi0 Thanks, running yarn upgrade nuxt did upgrade to V1.0.7 but it did not solve the issue for me. it still takes about 18 seconds even when i just save a file without making any change

disabling the module using components: false, makes watch fast again

maybe it's eslint-loader but i'm not sure. here is what i have:

    if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          options: {
            fix: true,
          },
        })
      }

[asmeeee]

@pi0 Thanks, running yarn upgrade nuxt did upgrade to V1.0.7 but it did not solve the issue for me. it still takes about 18 seconds even when i just save a file without making any change

disabling the module using components: false, makes watch fast again

maybe it's eslint-loader but i'm not sure. here is what i have:

    if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          options: {
            fix: true,
          },
        })
      }

Try to set components: null, it helped me before.

[Imad-Abdulkarim-offmade]

@andrei-scripcaru setting it to null is a solution but does not help because the components are not loaded anymore and i end up with unregistered comps

[podlebar]

when using global: 'dev' lazy loaded components don't work anymore.

[adamkhan]

Similar experience here. I thought something was wrong with my computer. Hot loading seems to just not work, or at least, every single component gets rebuilt whenever saving a single one. So I too went back to importing the old-school way.

[selimdoyranli]

+1

build runs two times and too slow (atomic design / 280 component file)

[pi0]

Hi. Starting with nuxt 2.15 and components v2 we are using a hybrid approach (#126) to avoid loader in development mode. Would be nice having your feedbacks when upgraded.

[kon3ko]

Looks like I'm having the same problem. When I change the code a little it took a very long time

✔ Client
  Compiled successfully in 25.52s

✔ Server
  Compiled successfully in 27.81s

And not only The response when I refresh the page also takes a lot of time.

This problem seems to have improved. If I set 'components: false'

✔ Client
  Compiled successfully in 2.38s

✔ Server
  Compiled successfully in 2.64s

• nuxt: 2.15.8
• node: v16.14.2
• In folder pages: 40+
• In folder components: 60+
• In forder plugins: 19

Do you have any advice? At first I thought it was normal. I've endured it for more than 7 months and now I think it has to find a solution. Because working with TailwindCSS takes a lot of time.

@pi0 @TakCastel @paulvonber

[kon3ko]

My solution: iconify/iconify#175