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

Global mixins cause memory leak in SSR #5089

Closed
MopTym opened this issue Mar 4, 2017 · 5 comments

Comments

Projects
None yet
6 participants
@MopTym
Copy link
Contributor

commented Mar 4, 2017

Vue.js version

2.x.x

Reproduction Link

https://github.com/vuejs/vue-hackernews-2.0

Steps to reproduce

  1. Clone the repo

  2. Add the code below to src/app.js

Vue.mixin({
  created () {}
})

code

  1. npm i && npm run build

  2. npm start

  3. Run a stress test: ab -n 1000 -c 10 http://127.0.0.1:8080/

What is Expected?

No global mixin:

result

result

What is actually happening?

With global mixin:

result

result

@yyx990803

This comment has been minimized.

Copy link
Member

commented Mar 5, 2017

This is because Vue is externalized, so each request you are adding a new mixin to the same copy of Vue. See https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer#externals-caveats.

Calls to Vue.use(plugin) are fine if the plugin is also externalized, since Vue will check if the plugin is already installed.

Simple fix is adding a flag on Vue to make sure you only apply the mixin once.

Or, avoid using global mixins in application code if you can. They are meant for plugins.

@yyx990803 yyx990803 closed this Mar 5, 2017

@buddyff

This comment has been minimized.

Copy link

commented Jun 16, 2017

I've the same problem.. could you fix it ?

@hvalcourtSerdy

This comment has been minimized.

Copy link

commented Feb 12, 2018

Is it possible to put an exemple of correct code here ?

@manniL

This comment has been minimized.

Copy link

commented Sep 5, 2018

@yyx990803 Is it still an issue the current vue-server-renderer version (and runInNewContext: false by default?

@zhangtinghai

This comment has been minimized.

Copy link

commented May 16, 2019

This is because Vue is externalized, so each request you are adding a new mixin to the same copy of Vue. See https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer#externals-caveats.

Calls to Vue.use(plugin) are fine if the plugin is also externalized, since Vue will check if the plugin is already installed.

Simple fix is adding a flag on Vue to make sure you only apply the mixin once.

Or, avoid using global mixins in application code if you can. They are meant for plugins.

function mergeAssets (
parentVal,
childVal,
vm,
key
) {

var res = Object.create(parentVal || null);
/*
Here is the reason of memory leak.

The code below can fixed this reason:

var res = Object.create(null);
extend(res, parentVal)

*/

if (childVal) {
assertObjectType(key, childVal, vm);
return extend(res, childVal)
} else {
return res
}
}

KaelWD added a commit to vuetifyjs/vuetify that referenced this issue Jun 14, 2019

fix(install): add property to Vue object to avoid memory leak (#7497)
* chore(install): add property to Vue object to avoid memory leak

memory leak caused by infinite global mixins being declared when in dev mode using HMR

* chore: add eslint ignore

See vuejs/vue#5089
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.