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

Version

v2.12.2

Reproduction link

https://github.com/hoiheart/nuxt-issue-demo

Steps to reproduce

https://github.com/hoiheart/nuxt-issue-demo/blob/master/plugins/demo.js
using global mixin in plugin

  1. Confirm the response time for the first time
  2. Generates hundreds or thousands of requests
  3. 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
before.png

Response time after 1000 request
after.png

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.

3 thoughts on “When using global mixin in plugin, performance degradation occurs due to increased requests.

  1. 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
    }
  2. @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.

  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.