nuxt.js vuex performance compared to vue.js + vuex

[payalord]

Version

v2.9.1

Reproduction link

https://codesandbox.io/s/nuxt-vuex-performance-596nm

Steps to reproduce

Commits are very slow in nuxt.js vuex compared to plain vue.js + vuex.
Example with nuxt.js: https://codesandbox.io/s/nuxt-vuex-performance-596nm
Example with vue.js + vuex: https://jsfiddle.net/payalord/m3x6kv92/21/

Before run please open chrome dev tools first, before each commit there will be console.log message fired. It will be visible how fast is vue.js + vuex commits for 2470 items to commit compared to same amount of commits with same data on nuxt.js vuex.

Note: nuxt.js example require to click on the link "Click Me!" to start. While vue.js jsfiddle example require just to run the jsfiddle. For results check the dev tools console.

What is expected ?

Expected that nuxt.js vuex commits will have same performance as vue.js + vuex commits.

What is actually happening?

nuxt.js + vuex commits are slower than vue.js + vuex commits.

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

[manniL]

Have you compared the results for the actual production builds?

[t1gu1]

I personally return to 2.8.x.
On the version 2.9.1 we see a HUGE performance drop.
It wasn't acceptable. (It tooks like 15sec more to load a page...)

[mrdj07]

I personally return to 2.8.x.
On the version 2.9.1 we see a HUGE performance drop.
It wasn't acceptable. (It tooks like 15sec more to load a page...)

We saw a dramatic increase in page changes especially when a page contained multiple NuxtLink elements.

[payalord]

@manniL no I didn't compare actual production builds. We are still in development. Those simple examples that I created are still illustrate the problem. Even in development mode it is hard to demo results of the project when there is such a huge freezing of the page due to performance issue on nuxt.js vuex commits.

I'll try to test with different builds, like to manually add vuex via plugins instead of using nuxt one. Or even will try to switch to redux and test it too. So later will let you know here.

[pi0]

I could reproduce this issue with even more simplified test. The strange part for me is that it is even happening for 2.8 and 2.7. Seems like a regression in one of nuxt dependencies.

UPDATE: Seems only happening for dev mode. For production start, it is exactly same as vuex example!

[pi0]

More simpler reproduction: https://github.com/pi0/nuxt-issue-6279

It is using nuxt ~2.7.0 and reproducible with nuxt dev only.

It seems something related to state reactivity (array push operation). For proof, uncomment this line: https://github.com/pi0/nuxt-issue-6279/blob/6f97120804ae092cc375de6d011980e8f232cfac/store/index.js#L9

[pimlie]

@pi0 Trying your reproduction, the first click takes indeed ~5000 ms but subsequent clicks take only ~500ms

[pi0]

@pimlie it is because subsequent runs don't append to array. The time-consuming part is Array.push to a reactive state. (please pull latest commit)

Using perf monitor, seems each pushSingleData call, makes multiple mutation calls and taking 6-24ms:

While in prod it is not happening:

[pimlie]

@pi0 Logging the state and looking at the registered watchers (__ob__.dep.subs[0].deps) then for a single mutation it seems 4 dependencies are added. Seems this causes all those notifies in the perf monitor

[pi0]

@t1gu1 @mrdj07 @payalord would you please double confirm this issue was not happening before last nuxt upgrade?

This is probably an issue that was always there for dev mode of vuex (jsfiddle is using prod builds of vue/vuex) OR a regression of dependencies. The upgrade may also bump other deps in the lock file.

[payalord]

@pi0 My current project nuxt version is 2.8.1 in node_modules, package.json have this: "nuxt": "^2.0.0". So I don't think I have done an upgrade.

I have another vue/vuex (not nuxt) version of my project with absolutely same code, that doesn't have this performance issue in developer mode. vue version there 2.5.17 and vuex version is 3.0.1

[payalord]

What I also noticed in my project is that when it start to work initially it is fast (even if it is slower than vue version) then speed of console.logs falling down. and after it reach 2470 it stops right? But then I left my browser and that page opened for 1 hr, came back and fired that action again without reloading the page and I saw that to run each cycle of that for loop now taking couple seconds. While on fresh page loaded it runs first 1000 for loop cycles in couple seconds, after leaving page for 1 hr and firing same action again each 1 cycle now taking couple seconds.

But this is still developer mode. Maybe production mode will not do the same after 1 hr leaving the page.

[aldarund]

@mrdj07 @t1gu1 since this issue isnt new one that appears in 2.9 if u have some perf problem that appear only in 2.9 please create a new issues with reproduction

[AndrewBogdanovTSS]

Same task:
Nuxt 2.8 https://prnt.sc/ozlivb
Nuxt 2.9 https://prnt.sc/ozljaj
Which makes 2.9 pretty much dead and unusable

[pimlie]

@AndrewBogdanovTSS Could you please share a minimal reproduction with that exact task?

[AndrewBogdanovTSS]

@pimlie it's hard to create a clean reproducible link since this issue is only happening on a complex setup when you have lots of components on the page that are requesting data from the vuex store. The issue can be seen when those components are being destroyed when router changes

[pimlie]

I have to say I am a bit disappointed by you guys here (also talking to the people who only gave a thumbs-up). Saying things like 2.9 is _dead_ or _unacceptable_ but without giving us the tools to properly look into this issue is not very nice or motivating. I hope you realize that the nuxt team has spent a lot of time working on v2.9 but due to nuxt's many dependencies and use-cases we cant just test them all.

We are very eager to try to fix this issue but we can only do that with your help. We cant reproduce this ourselves like you do, so please provide a proper reproduction that proves first of all these issues exists in 2.9 but not in 2.8.

And yes, I know that can take quite a bit of time. But by not providing a reproduction here you are more or less saying that you dont want to spent that time but you expect us to start searching for a needle in the haystack. As Nuxt.js is an opensource project and we are all spending our spare-time on its development, I dont think thats really fair to ask from us.

[saknarak]

I had same issue

here is minimal reproduce link
https://github.com/saknarak/nuxt-issue-6279

step to reproduce

git clone https://github.com/saknarak/nuxt-issue-6279
cd nuxt-issue-6279
npm i
npm run dev
# open http://localhost:3001
npm run build
# serve dist
# open http://localhost:5000

Result

in development

• Load time about 500ms

• Update time about 3000-5000ms

  in production

• Load time about 250ms

• Update time about 10-20ms

[pi0]

@saknarak Can you confirm this is not happening in previous versions of nuxt? The perf penalty is already confirmed (https://github.com/nuxt/nuxt.js/issues/6279#issuecomment-524029855) but I could also reproduce it with 2.8. That's why we think this is not a regression of nuxt but a dependency of it.

[saknarak]

@pi0 i try at 2.8, 2.7 had same result as 2.9

I've found Vuex Strict Mode is root cause.
when export const strict = false in store/index.js
It's now fast as production.

Thank for the clue.

[AndrewBogdanovTSS]

@saknarak but how to make it work with strict mode and why it's causing such drop? Maybe there is some related vuex issue already logged?

[manniL]

Strict mode runs a synchronous deep watcher on the state tree for detecting inappropriate mutations, and it can be quite expensive when you make large amount of mutations to the state. [[source](https://vuex.vuejs.org/guide/strict.html#development-vs-production)]

I think we have to live with the trade-offs here.

The examples (with strict mode for vue+vuex) have roughly the same execution duration (~9.5 seconds). If the VueX strict mode behavior has changed (i.e. perf in dev has decreased) it'd be more appropriate to raise an issue there as we can't do much here and both timings are roughly the same. But as there hasn't been a VueX a release since May, I don't think that's the case.

Closing here for now.

[AndrewBogdanovTSS]

@manniL I tried setting strict to false as @saknarak suggested, but still got the same performance issues when .destroy() is called, it happens both in dev and in production so I guess it's unrelated to strict mode at all, might be 2 separate issues

[manniL]

@AndrewBogdanovTSS Probably related to the (former) vue meta memleak.

[manniL]

@mapsgeek Because of a resolved issue which has a workaround and that doesn't happen in production and only with large stores? If you think so 🤷‍♂

[mapsgeek]

sorry i mistakenly deleted my comment, i really love nuxt and vue in general but this quite turning off and quite worrying especially if you are transitioning an existing app and this is your first experience with a certain tech and trying to evaluate things before you take a leap of faith

[pimlie]

@mapsgeek any project has issues, so you should never judge a project on a single issue. The only thing that should matter is how issues are resolved.

I know I am biased, but I'd like to believe that the nuxt core-team has proven to be extremely eager to resolve and release proven major issues introduced within its codebase as quickly and as stable fixed as possible.

[t1gu1]

I just test the 2.10.0 and the issue is still present. (We build and start a new project to test)
Since the 2.9.0 the performance drop is huge. (3s+ to load a page)

On the 2.8.1, it seems take less than an half second. (Maybe less it's really fast)

Here I make a test project to reproduce our bug
https://github.com/t1gu1/nuxt-2.9.0-and-more-is-slower

Thanks

[t1gu1]

I don't understand the point of strict.

In the official documentation, they say:

Do not enable strict mode when deploying for production!

Reference: https://vuex.vuejs.org/guide/strict.html

[manniL]

It's not enabled in prod :wink:

https://github.com/nuxt/nuxt.js/blob/838bacf4c396fb0bd09adf16f5b4a3f89b4c016a/packages/vue-app/template/store.js#L51

[AndrewBogdanovTSS]

@manniL so only in dev by default, right?

[manniL]

Yes

[tvld]

Dev performance is really an BIG issue... Would it help to allow switching off strict in nuxt.config? In case we don't need the warnings in that project anyway?

[manniL]

@tvld you can already do that with export const strict = false in /store/index.js

[tvld]

@manniL Thank you, but I dont have an /store/index.js. Isn't the use of index.js deprecated?

I do have a small /store/app.js . Would adding the line there, give same result?

[payalord]

@tvld only the "Classic" mode is deprecated, not the index.js. And as it is said in "Modules" mode index.js is a root vuex module. So you just need to use it with export const strict = false.

[tvld]

ok, so I will remove export const strict = false from my /store/app.js and will make a new /store/index.js with just that one line...)

[sebastillar]

@tvld it didn't work for me, has you fix it?

[tvld]

I just don't have that "strict line" in my code any more and experience no issues right now... Cant recall if I did anything else, but I dont think so