Memory Leak on route navigation

Environment

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.12
• Nitro Version: 0.6.0
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://v3.nuxtjs.org/getting-started/introduction

Describe the bug

repeatedly switch tabs from e.g. get started to guide and watch the memory increase. Fresh load After 30 swaps

Additional context

For bigger pages this results in 100s of leaked MBs within only a handful of route changes which in turn makes switching routes take seconds and is really bad user experience.

Logs

No response

[danielroe]

I often regret interim updates, but - 🤷 - my current hypothesis is that this is an issue with <Suspense> + <Transition> preserving the context in the pending branch, meaning every click handler (for example) preserves a reference to potentially thousands of removed DOM nodes.

Having entirely disabled <NuxtPage> and <NuxtLayout> in the Nuxt Movies project, I still get the behaviour with the following template. (If you want to replicate, you will also need to swap out the auto-imports of useRoute and useRouter to be from vue-router for as pure a Vue experience as possible).

<template>
  <div>
    <RouterView v-slot="{ Component }">
      <template v-if="Component">
        <Transition mode="out-in">
          <Suspense>
            <component :is="Component" />
          </Suspense>
        </Transition>
      </template>
    </RouterView>
  </div>
</template>

https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components

Removing <Transition>, either from the template above, or if using NuxtPage, via app.pageTransition and app.layoutTransition greatly reduces the issue in my testing (that is, in the Nuxt Movies repro, decreases leak from 1.7Mb per navigation to 70Kb). Nevertheless, there are still some preserved detached DOM nodes from the pending state of <Suspense> , which suggests that the real core issue here is coming from <Suspense>.

The next step is likely to attempt to reproduce using Vue without Nuxt to confirm my hypothesis.

Possible causes I’ve ruled out:

• NuxtLink’s intersection observer implementation
• NuxtLayout
• NuxtPage and page progress hooks
• useHead

[warflash]

Gotcha, got a pretty tight schedule today unfortunately but should I get to it I’ll post it here. Enjoy family time and the rest of your sunday!