Nuxt.js: When using global mixin in plugin, performance degradation occurs due to increased requests.

Created on 13 Apr 2020 · 4Comments · Source: nuxt/nuxt.js

Confirm the response time for the first time
Generates hundreds or thousands of requests
Check the response time afterwards

What is expected ?

Has a response time that is similar to the first

What is actually happening?

The response time is getting slower

First response time

Response time after 1000 request

Additional comments?

If the mixin declaration is in export, it will also be affected by production.
In dev mode, it is affected regardless of the position of the mixin declaration.

bug-report

Source

hoiheart

👍1

Most helpful comment

We encountered this error long time ago,
It has memory leak, cause Vue instance on server side is a single object. exported function, would be called for each user request. after too many requests, heap memory max size will reach and cause an app crash.

Use mixin outside exported function, and if you want to use nuxt context, (req, modules, ...) store it in a local variable like this:


let user;

Vue.mixin({
   mounted () {
      console.log(user)
  }
})

export default function (ctx, inject) {
  user = ctx.req.user // example
}

SasanFarrokh on 14 Apr 2020

👍3 ❤1

All 4 comments

Use mixin outside exported function, and if you want to use nuxt context, (req, modules, ...) store it in a local variable like this:


let user;

Vue.mixin({
   mounted () {
      console.log(user)
  }
})

export default function (ctx, inject) {
  user = ctx.req.user // example
}

SasanFarrokh on 14 Apr 2020

👍3 ❤1

@SasanFarrokh
Thank you for your reply.
In addition, Should I use outside export function when calling all Vue instance?

// Can't I install the plug-in like this?
export default ({ app, store }) => {
  Vue.use(myPlugin, { app, store })
}

hoiheart on 14 Apr 2020

@SasanFarrokh
Thank you for your reply.
In addition, Should I use outside export function when calling all Vue instance?
// Can't I install the plug-in like this?
export default ({ app, store }) => {
  Vue.use(myPlugin, { app, store })
}

Yes, of course. This happens to all Vue global functions including use, mixin, component, ...
Vue global functions (use, mixin, component, ...) should all be outside export function.

SasanFarrokh on 14 Apr 2020

👍3

Actually you should never add a global mixins when doing SSR without checking if it has been registered before!

// my-mixin-plugin.js
if (!Vue.__my_mixin__) {
  Vue.mixin({
    ...
   })
   // Avoid registering again the mixin and other calls from SSR
   Vue.__my_mixin__ = true
}

This case also applies for unnamed plugins, components.