Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report][3.3.1] Memory Leak When Configuring Vuetify on Nuxt3 SSR App during High Traffic #17473

Closed
smiura6 opened this issue May 27, 2023 · 5 comments
Labels
duplicate The issue has already been reported

Comments

@smiura6
Copy link

smiura6 commented May 27, 2023

Environment

Vuetify Version: 3.3.1
Vue Version: 3.3.4
Browsers: Google Chrome
OS: Windows
Node Version: 18.16.0
Nuxt Version: 3.5.1
Nitro Version: 2.4.1
Package Manager: npm@9.5.1
Builder: vite

Steps to reproduce

  1. Set up Vuetify on Nuxt3.
    ■plugins\vuetify.js
    import { createVuetify } from 'vuetify'
    
    const vuetify = createVuetify({
      ssr: true
    });
    
    export default defineNuxtPlugin(nuxtApp => {
      nuxtApp.vueApp.use(vuetify)
    });
    
    ■nuxt.config.ts
    export default defineNuxtConfig({
      css: ['vuetify/lib/styles/main.sass'],
      build: {
        transpile: ['vuetify'],
      },
      vite: {
        define: {
          'process.env.DEBUG': false,
        },
      }
    });
    
  2. Building the application that was created by combining Nuxt3 SSR and Vuetify.
  3. Start the server in inspector mode.
    node --inspect-brk=9229 .output\server\index.mjs
  4. Access the following in the browser.
    chrome://inspect
  5. Measure the memory usage after accessing the app once and after accessing it 10,000 times post-launch.

Expected Behavior

Due to garbage collection, memory usage remains constant without accumulation.

Actual Behavior

The memory usage increases as follows.

Number of accesses Memory usage
1 15.7MB
10,000 83.3MB

■1 access
image

■10,000 accesses
image

Reproduction Link

https://github.com/smiura6/nuxt3-vuetify-memory-test

@GaetanWi
Copy link
Contributor

GaetanWi commented Jul 7, 2023

Any follow up on this ?
Same problem here, on our app, with memory leak as soon as we're loading Vuetify in our Nuxt app.

@Etsurosu
Copy link

Etsurosu commented Jul 7, 2023

Same behavior here
Don't need high traffic, can reproduce with the nuxtjs template + vuetify basic setup

@KaelWD
Copy link
Member

KaelWD commented Jul 10, 2023

Having this variable be reactive somehow prevents the entire vue app from being garbage collected in production builds

const parsedOptions = reactive(parseThemeOptions(options))

@KaelWD
Copy link
Member

KaelWD commented Jul 10, 2023

Duplicate of #16156

Could've saved myself like an hour if I'd just started with that lol

@KaelWD KaelWD closed this as not planned Won't fix, can't repro, duplicate, stale Jul 10, 2023
@KaelWD KaelWD added duplicate The issue has already been reported and removed S: triage labels Jul 10, 2023
@memic84
Copy link

memic84 commented Oct 4, 2023

Running on latest version, and seeing probably the same memory issue in: #18393

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate The issue has already been reported
Projects
None yet
Development

No branches or pull requests

5 participants