Nuxt.js: Possible memory leak with nuxt-link and/or router-link

[slidenerd]

Version

v2.10.2

Reproduction link

https://codesandbox.io/s/github/slidenerd/nuxt_child_slow_bug_demo

Steps to reproduce

Run the codesandbox demo
Click on an item in the list on the left pane
try scrolling down immediately, the browser has frozen
The url does not change immediately
try clicking multiple items and scroll up and down and you ll observe the LAG

What is expected ?

The item gets selected immediately. The scroll does not lag, On selecting the child view the url changes rapidly. The app should not FREEZE.

What is actually happening?

In the build version, the app freezes depending on how many items you have, on the dev version, it crashes the browser completely.

Additional comments?

I am trying to build a list detail view with a very simple setup
I have a list on the left pane with 5000 items. Feel free to change the numbers up and down
Clicking on an item on the left side, changes the content of the nuxt-child on the right as per the nested routes demo by official nuxt repo
I am using a key on the child route and no-prefetch and it still lags like anything
The dev version is unrunnable , the build version freezes quite a bit
Some suggestions on how to fix this would be super appreciated

[aldarund]

Is it reproducible without nuxt with pure vue & vue-router?

[slidenerd]

If I am not mistaken, I would need to use the vue-webpack setup via vue-cli to set the same example up, but that would be SPA would it not while this is SSR

[aldarund]

It doesnt matter about SSR, since your problem happens on client. And you dont really need even vue cli, you can use cdn version or via vue-cli, it doesnt really matter.
Also, does it happen in production build or only in dev?

[slidenerd]

Here is the plain Vue version, it is also slow but the nuxt version literally crashes the browser, I have kept the same number of items 5000, as a test try scrolling down to item 1000 and clicking on item 1001 1002 1003 in order and you ll see the difference between both

[manniL]

The difference is definitely noticeable, yes.

[Alex1990]

I have a page which has many <nuxt-link>s. The below is vue-devtools performance data when I navigate the router.

And, if these <nuxt-link>s are removed from the page, the JS evaluation time will reduce distinctly. By the way, I use ssr mode.

[mstaack]

experienced the same as @Alex1990 ... is this being investigated?

[manniL]

~First thing that comes to my mind is the intersection observer registered for each link that could influence the perf. But that's just an educated guess at the moment.~

[ozgurrgul]

This is a problem for me for a few months. Any workaround except switching to the good old <a>? Also in my case, I have around 60 nuxt-link in the page. Not thousands.

[tvld]

Here as well, with about 40 links per page In my case app becomes slower the longer you navigate, noticeable on mobile. First to appear after about twenty or so clicks on links.

[ozgurrgul]

First thing that comes to my mind is the intersection observer registered for each link that could influence the perf. But that's just an educated guess at the moment.

@manniL

Its not because of IntersectionObserver, because both nuxt-link and router-link causes same problem in a nuxt application. (I created the same sandbox with router-link https://codesandbox.io/s/authdemo-l1cs4)

[tvld]

@jatarga maybe asking for the obvious, but with <a..> you don't experience performance regression?

[ozgurrgul]

@jatarga maybe asking for the obvious, but with <a..> you don't experience performance regression?

Obviously we are. Using <a> is even meaningless because we are sacrificing SPA.

[tvld]

It seems that for me freezing after some clicking, only happens with links that contain route.params ... The regular links don't build up delays... Still investigating...

[rainerCH]

hi
i have the same problems with ~100 links, with or without route.params. thanks for your effort :)

[tvld]

I think this is one of the most important show-stopping bugs in nuxt. I noticed that with each click on a link, the memory consumption shoots up with between 4-12MB on both chrome and FF. So, it's not the number of links but the memory it is building up. Over about 1GB junk, the browser crashes. It happens on each site, as far as I can tell...

@slidenerd could you change title of this issue to not just 1000?, I get the idea that nuxt core devs don't know yet they have a "priority-one" bug on their hands that breaks deployment ...

[pimlie]

Have tested the linked codesandbox, can @slidenerd or anyone else please confirm the following findings?

1. The issue does not occur when using <button @click="$router.push(...)">{{ i }}</button> instead of router-link or derivative
2. The issue does not occur when using nuxt instead of nuxt-child. Eg move pages/index.vue to layouts/default.vue, rename nuxt-child to nuxt, add an empty index.vue sfc, rename the child routes from index/news to test/news to make sure its a top level route

Please note: it looks like Chrome only needs the first change to become mostly workable (there seems to be still a very slight delay between clicking the button and page load). Firefox rly needs both changes to become workable

--edit--
That said, it doest seem to be relate to the nuxt or nuxt-child components because when I use router-view in the layout with the second change its still very slow with using router-link

--edit--
If you list both router-links as buttons with $router.push and click the button, its not fast either. Which means it might be something related to router-link (and eg not Nuxt related)

--edit--
hmm, plain vue/vue-router doesnt seem to have this issue: https://jsfiddle.net/3gx51rzp/1/

[tvld]

@pimlie I just tried __almost empty__ page, just with a few <button @click="$router.push(...)">{{ i }}</button>. The memory build up after one click __going back and forth to same two pages__ is each time about 6MB. After about 20 clicks,I am already on 263MB it really grows more quickly and gets really slow to load 8 seconds..

Garbage collection after some minutes brings it down to 261 MB, so that makes no difference. Again, with all same components.

[pimlie]

Hmn, then its probably related to this issue: https://github.com/vuejs/vue-router/issues/3105

[tvld]

For comparison, tried same with vue __without nuxt and vue-router__ older v3.0.6:

And no slowing down at all. Vue instance only takes 10% of nuxt memory (this is with our full site, so not even stripped down). Here garbage collection works as after a minute it is back to a nice 19MB.

[Frozire]

I am experiencing the same with just ten links - could we change the title, so it isn't assumed to be an edge case?

[pimlie]

Title updated, does anyone has time to investigate the issue more deeply?
To check if its related to the Nuxt.js vue-app you can create an app folder in the src root of any Nuxt project and eject any of the vue-app templates into that folder to override the default imports from node-modules/@nuxt/vue-app/template (https://github.com/nuxt/nuxt.js/tree/dev/packages/vue-app/template)

[Chrisimir]

Any update or is it confirmed to be a issue with any of the dependencies mentioned in this thread?

Also experiencing this issue and need urgent workaround.

Performance test after navigating to 2 pages in my app.
Using 2.11.0 SSR

[tvld]

I am still having this breaking issue as well. I disabled SEO on i18n and that helped a bit, but still crashing out of memory after some time

[Chrisimir]

I guess it is an implementation issue and not a framework bug since it would be a major issue for everyone.
Now I'm stuck with a giant Nuxt app with <a> tags :expressionless:

Any idea on how to troubleshoot this? @Atinux @pi0 @manniL

[tvld]

After several weeks into it, I am started to be convinced it _is a framework bug_, even though the implementation _setup might trigger_ it.

Right now my biggest indication is that my npm run dev crashes every 10 minutes or so due to memory overload. If I open multiple browser tabs, the memory overload and resulting crash comes much more quickly. Do you see the same issue with multiple browser tabs to same app?

[pimlie]

Please run yarn upgrade to make sure vue-meta v2.3.3 is installed. Recently a memory leak was fixed in vue-meta, maybe thats related to this issue.

[tvld]

Just upgraded all packages npm update and again after 10 minutes the dev environment crashes with memory overload.

[Chrisimir]

Just upgraded all packages npm update and again after 10 minutes the dev environment crashes with memory overload.

Have you seen if it updated vue-meta to v2.3.3 ? I tried an npm update and it didn't get the new version. I will try to force the version later and update this thread with my results.

[tvld]

@Chrisimir good one! npm list | grep vue-meta gave me :

│ │ │ ├─┬ [email protected]
│ │ │ ├── [email protected] deduped

So it indeed did not upgrade... So I will keep posted how you achieve ))

[Chrisimir]

It was vue-meta that was to blame in my case :tada:
After updating to 2.3.3, no crash and fast routing.

How I did it:

• Deleted node_modules folder
• Deleted package-lock.json
• npm i

I'm sure there is a better way of forcing an update, but this worked for me, my vue-meta would not update until I deleted the files. Hope this works for you @tvld !

[rainerCH]

Works in my case with vue-meta 2.3.3 again :) thanks!

[tvld]

Did not want to cheer too soon, but it seems it's solved for me as well, so far npm run dev did not crash again for me :tada:

[Frozire]

I've been running for a couple of hours too now - no crash.

[tvld]

Bummer... I got the same issue, crash on out of memory. But it's taking longer so at least some progress.... :thinking:

[Chrisimir]

@tvld Do you still experience it only has issues when you use route.params or does the memory consumption rise with every type of link?

Have you played around with link prefetching to see if there is an improvement?

[tvld]

@Chrisimir I've just spent half an hour refreshing pages on our production (www.bligson.com), switching between pages. Before vue-meta 2.3.3 the memory size would grow with 5MB going back and forth between two pages. Now it stays about the same, if I let garbage collection do its work. So that's good.

What I still have though is that de development environment crashes with out of memory. I start to think it is is related to vue-i18n not cleaning up after each reloading of a language file but that's just a hunch so far. If so, than the issues is not related to this one ...

[slidenerd]

Even with "nuxt": "^2.12.2" npm run build && npm run start somewhat runs decently (still slower than the plain vue version) but npm run dev completely crashes within seconds of trying to scroll up and down and open a few links

[AregGhazaryan]

This is also happening on the latest version of nuxt i have [email protected], i have created some nested routing with one simple id and whenever i click a nuxt-link it freezes and crashes. I have tried to create a method and use router push but it doesn't seem to work either, its freezing again. I think its because i am using the link in a nested route, on the homepage it works perfectly.

[tvld]

I upgraded my RAM from 12GB to 24GB, and since then I did not have this crash...yet at least... could this be related?

[AregGhazaryan]

@tvld i checked the memory consumption yesterday, it was handling promises non stop in one file. I think its getting stuck in some sort of loop.