Nuxt 添加全局插件内存泄漏问题 [英] Nuxt add global plugins memory leakage issue

问题描述

我在 Nuxt 2.13 通用模式下，我有严重的内存使用和泄漏！！

I'm on Nuxt 2.13 universal mode, and I have serious memory usage and leakage!!

所以当我在寻找相关问题时，我在 Nuxt Docs 插件 - NuxtJS :

so as I was looking for related issues, I found this in Nuxt Docs Plugins - NuxtJS :

不要使用 Vue.use()、Vue.component()，并且在全局范围内，不要在 Vue 中插入任何专用于 Nuxt 注入的函数.会导致服务器端内存泄漏.

Don't use Vue.use(), Vue.component(), and globally, don't plug anything in Vue inside this function, dedicated to Nuxt injection. It will cause a memory leak on the server-side.

谁能告诉我这是什么意思??

can anyone tell me what that means??

我目前正在使用许多外部插件和一些由 vue.component() 和 vue.use() 全局添加的 mixin.可能是他们的问题??(我还有一个 utils.js mixin 文件，其中包含许多全局添加到 nuxt.config 的方法和计算数据)

I'm currently using many external plugins and some globally added mixins by vue.component() and vue.use() . may them be the problem?? (i also have an utils.js mixin file that includes many methods and computed data that is added globally to nuxt.config)

我的一些插件和混入全局添加到 nuxt.config.js 文件:

some of my plugins and mixins that added globally to nuxt.config.js file :

// Vuetify 2
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader version "^2.1.1"
import 'font-awesome/css/font-awesome.min.css'
import '@fortawesome/fontawesome-free/css/all.css'
import colors from "vuetify/es5/util/colors";
import '~/assets/vuetify.scss'
// let siteDirection = process.env.SITE_DIRECTION

Vue.use(Vuetify)

export default ctx => {
  const vuetify = new Vuetify({
    rtl: process.env.SITE_DIRECTION === 'rtl' ,
    customVariables: ['~/assets/variables.scss','~/assets/colors.scss'],
    icons: {
      iconfont: 'mdi', // default - only for display purposes
    },
    theme: {
      dark: false, // From 2.0 You have to select the theme dark or light here
      themes: {
        dark: {
          primary: colors.deepPurple.lighten3,
          accent: colors.deepPurple.accent3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent4
        }
      }
    }
  })

  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework
}

// Vue-Glide Package
import Vue from 'vue'
import { Glide, GlideSlide } from 'vue-glide-js'

Vue.component("vue-glide", Glide)
Vue.component("vue-glide-slide", GlideSlide)

// Noty package
import Vue from "vue";
import Noty from "noty";

Vue.prototype.$noty = (type, text) => new Noty({
    layout:process.env.SITE_DIRECTION === 'rtl' ? 'bottomLeft' : 'bottomRight',
    type,
    text,
    timeout: 5000
});

// vue-product-zoomer package
import Vue from 'vue'
import ProductZoomer from 'vue-product-zoomer'
Vue.use(ProductZoomer)

我的 Mixins 也是默认添加的:

my Mixins are also added the default way:

import Vue from 'vue'

const FormattedPrice = {
    install(Vue){
      Vue.mixin({
        methods:{
          formattedPrice(price,options){
            if(price !== null && price !== undefined){
              if(typeof price === 'object'){
                let min = price.min ? Number(price.min).toLocaleString() : 0
                let max = price.min ? Number(price.max).toLocaleString() : 0
                return min + ' - ' + max + (options && options.noSign ? '' : this.currencySign)
              }else{
                // try {
                //   return price.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",") + this.currencySign
                //   // return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + this.currencySign
                // } catch (error) {
                //   return Number(price).toLocaleString() + this.currencySign
                // }
                return Number(price).toLocaleString() + (options && options.noSign ? '' : this.currencySign)
              }
            }
            return '...' + (options && options.noSign ? '' : this.currencySign)
          }
        },
        computed:{
          currencySign(){
            return ' ' + this.shopInfo.currency.sign
          }
        }
      })
    }
  }
  
  Vue.use(FormattedPrice)

推荐答案

对于您的问题:

不要使用 Vue.use()、Vue.component()，并且在全局范围内，不要在 Vue 中插入任何专用于 Nuxt 注入的函数.会导致服务器端内存泄漏.

Don't use Vue.use(), Vue.component(), and globally, don't plug anything in Vue inside this function, dedicated to Nuxt injection. It will cause a memory leak on the server-side.

请参阅此 PR，这就是发出该警告的原因.

See this PR, which is the reason for that warning.

更明确的解释是，您应该不从 调用 Vue.use() 或 Vue.component()在导出的插件函数中.您应该将调用放在全局范围内，并将它们应用到上下文中.

A more clear explanation would be that you should not call Vue.use() or Vue.component() from inside an exported plugin function. You should place the calls in the global scope, and simply apply them to the context.

我相信您在导出函数内部调用 new Vuetify() 会导致内存泄漏.他们完全有可能调用 Vue.use() 或 Vue.component() 作为该调用的副作用.

Where I believe you're getting a memory leak is with calling new Vuetify() from inside the exported function. It's entirely possible that they are calling Vue.use() or Vue.component() as a side effect to that call.

您应该将该调用置于全局范围内.如果这不起作用，那么您可能需要考虑创建一个最小的可重现示例并在 Nuxt GitHub 存储库上打开一个问题.

You should instead place that call in the global scope. If this doesn't work, then you may want to consider creating a minimum reproducible example and opening an issue on the Nuxt GitHub repo.

// Vuetify 2
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader version "^2.1.1"
import 'font-awesome/css/font-awesome.min.css'
import '@fortawesome/fontawesome-free/css/all.css'
import colors from "vuetify/es5/util/colors";
import '~/assets/vuetify.scss'
// let siteDirection = process.env.SITE_DIRECTION

Vue.use(Vuetify)

const vuetify = new Vuetify({
    rtl: process.env.SITE_DIRECTION === 'rtl' ,
    customVariables: ['~/assets/variables.scss','~/assets/colors.scss'],
    icons: {
      iconfont: 'mdi', // default - only for display purposes
    },
    theme: {
      dark: false, // From 2.0 You have to select the theme dark or light here
      themes: {
        dark: {
          primary: colors.deepPurple.lighten3,
          accent: colors.deepPurple.accent3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent4
        }
      }
    }
})

export default ctx => {
  

  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework
}

这篇关于Nuxt 添加全局插件内存泄漏问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！