vue.js - 内存泄漏 Laravel + Vue(router,vuex)

Question

大家好，我有一个问题。我正在处理一个大型 SPA 项目，并在切换路由器时发现内存泄漏。我已经完全排除了整个代码，只留下了测试代码。唉，这并没有帮助，即使使用带有切换路由的最简单的组件，垃圾收集器也无法正常工作。

每次切换时，都会创建 DOM 节点并且不再删除它们，这会导致在使用 SPA 应用程序时产生巨大的负载。我试图分析并找出内存中存储的内容。事实证明，Vue 组件并没有被销毁，而是保留在内存中。

该项目使用 Laravel-mix 组装

这是我使用的原始代码，但仍然存在内存泄漏：https ://jsfiddle.net/mgwbjc8v/2/

html:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <ol>
    <li>Open Browsers debug console.</li>
    <li>Switch between foo and bar.</li>
    <li>Repeat...</li>
  </ol>
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/bar">/user/bar</router-link>
  </p>
  <router-view></router-view>
</div>

视图：

let foo = {
    template: `<div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
    <div>Bar</div>
  </div>`,
  mounted() {
  }
};

let bar = {
    template: `<div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
    <div>Foo</div>
  </div>`,
  mounted() {
  }
};


const router = new VueRouter({
  routes: [
    { path: '/user/foo', component: foo },    
    { path: '/user/bar', component: bar }
  ]
});


const app = new Vue({ router }).$mount('#app');

项目中的连接有点不同。如有需要，我可以提供，但意思是一样的

这是带有内存的快照

Webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

应用程序.js

require('./bootstrap');

window.Vue = require('vue');
import router from './router';
import './language';
Vue.config.productionTip = false
const Vuex = require('vuex');
window.Centrifuge = require('./libs/centrifuge.min');
window.Noty = require('noty');



Noty.overrideDefaults({
    layout   : 'topRight',
    theme    : 'nest',
});

window.App = require('./app-object');
require('./app-legacy');

/** centrifuge 1.8.0 */
const cfuge = require('./centrifuge');

window.custom = {};
window.custom.scrollBar = require('./custom/scrollBar');

Vue.use(Vuex);

const store = new Vuex.Store(require('./storage.js'));

store.state.centrifuge = cfuge;

Vue.component('Foo', require('./components/Foo.vue'));
Vue.component('Bar', require('./components/Bar.vue'));
Vue.component('panel-loading', require('./components/other/PanelLoading.vue'));



const app = new Vue({
    el: '#app',
    store,
    router
});

标签： vue.jsvuexvue-router