Nuxt 添加全局插件内存泄漏问题

Posted

技术标签:

【中文标题】Nuxt 添加全局插件内存泄漏问题【英文标题】:Nuxt add global plugins memory leakage issue 【发布时间】:2021-06-24 03:29:29 【问题描述】:

我在 Nuxt 2.13 通用模式下,内存使用和泄漏严重!!

所以当我在寻找相关问题时,我在 Nuxt Docs Plugins - NuxtJS 中找到了这个:

不要使用 Vue.use(),Vue.component(),并且全局,不要在这个函数里面插入任何 Vue 中的东西,专门用于 Nuxt 注入。会导致服务端内存泄漏。

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

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

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

// 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 也是默认添加的:

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*)(?=(\d3)+(?!\d))/g, ",") + this.currencySign
                //   // return price.toString().replace(/\B(?=(\d3)+(?!\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)

【问题讨论】:

【参考方案1】:

关于你的问题:

不要使用 Vue.use(),Vue.component(),并且全局,不要在这个函数里面插入任何 Vue 中的东西,专门用于 Nuxt 注入。会导致服务端内存泄漏。

请参阅此PR,这是该警告的原因。

更明确的解释是,您应该从导出的插件函数内部调用Vue.use()Vue.component()。您应该将调用放在全局范围内,然后简单地将它们应用到上下文中。

我认为您遇到内存泄漏的地方是从导出函数内部调用new Vuetify()。他们完全有可能调用Vue.use()Vue.component() 作为该调用的副作用。

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

// 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

【讨论】:

嗯......,tanx。因此,根据我从您的解释中得到的信息,我的其他插件和 mixin 都可以,无需使用 inject 。 vue doc 中的警告是关于使用 use()component() inside 导出功能。顺便说一句,那个 vuetify 插件是一年前 nuxt 使用 veutify v1 的时候,我不得不这样做才能使用 v2。将根据 vuetify 文档重新安装它 是的,我觉得其他一切都还好。如果您确实更新了 Vuetify 安装并且这种情况仍然存在,我会尝试创建一个最小可重现的示例,因为您在这里展示的其他任何内容都不太可能 tanx,如果您也检查一下,我将不胜感激(我的整个泄漏问题):***.com/questions/66841758/…

以上是关于Nuxt 添加全局插件内存泄漏问题的主要内容,如果未能解决你的问题,请参考以下文章

为啥lua语言中使用全局变量就会造成内存泄漏呢??

内存溢出与内存泄漏

内存溢出与内存泄漏

JS中4种常见的内存泄漏

片段 - 全局视图变量与本地和内部类侦听器和内存泄漏

前端如何处理内存泄漏