vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

fix(memory): defaultThemeOptions moved inline theme.ts

Open memic84 opened this issue 1 year ago • 4 comments

Description

When using vuetify in Nuxt SSR, with high traffic there are memory leaks on certain objects. I was able to isolate those to the theme composable and fix them. Resolves 18393

Markup:

This repository can be used to reproduce: https://github.com/memic84/vuetify-memory-leak-reproduction

First you should link your local vuetify code with yarn link and yarn link "vuetify"

and then you can run Nuxt.

yarn && yarn build && node --inspect .output/server/index.mjs

To test the fix, link the PR code to the vuetify reproduction code.

memic84 avatar Dec 05 '23 06:12 memic84

At a glance this seems very heavy handed. I'll carve out some time this week to investigate.

johnleider avatar Dec 05 '23 14:12 johnleider

I took a different approach to this. I'm not convinced rtlClasses needs to change either. More info here https://github.com/vuetifyjs/vuetify/commit/af07b7fe8b2fb8e9b468d9c946aa5fcf2551654d

If you want to refactor this to only address rtlClasses that's fine, but I'm going to need a valid reproduction that shows the leak. Thank you!

johnleider avatar Dec 06 '23 19:12 johnleider

I took a different approach to this. I'm not convinced rtlClasses needs to change either. More info here af07b7f

If you want to refactor this to only address rtlClasses that's fine, but I'm going to need a valid reproduction that shows the leak. Thank you!

@johnleider

I have split the PR into two. This one contains the locale composable: https://github.com/vuetifyjs/vuetify/pull/18787

I was able te reproduce and isolate the memory leak in (the computed rtlClass): https://github.com/vuetifyjs/vuetify/blob/2c2b7deba00146f7918dfac90ea9dc31c6c86200/packages/vuetify/src/composables/locale.ts#L91C12-L91C12 (not sure why the computed is leaking, best guess is that ik keeps references)

Here is the reproduction: https://github.com/memic84/vuetify-memory-leak-reproduction

When running the nuxt build with node --inspect, and use ApacheBench or something similair (every 200 users), the memory keeps going up.

Steps are also mentioned here in the description: https://github.com/vuetifyjs/vuetify/issues/18393

memic84 avatar Dec 07 '23 16:12 memic84

Your P.R.s both contain the same changes. Please make sure #18787 doesn't have the same stuff as this.

johnleider avatar Dec 18 '23 23:12 johnleider