vuex에서 registerModule/unregisterModule을 사용하는 동안 메모리 누수가 발생함

vuex에서 registerModule/unregisterModule을 사용하는 동안 메모리 누수가 발생함

Store의 메모리 누수가 관찰되고 있습니다.vuex v3.1.0의 registerModule/unregisterModule 사용 중 _vm

힙 프로파일링에서 oldVm 인스턴스가 가비지 수집되지 않았습니다.Github 링크

위의 문제 jsFiddle 링크를 설명하기 위해 데모 링크를 만들었습니다.

재현 순서

1. 이 문제의 일부로 언급된 JSFiddle 링크를 엽니다.
2. 초기 단계에서 브라우저에 힙 메모리를 확인하고 기록합니다.
3. 모듈 B를 동적으로 100회 등록하려면 [Register]버튼을 클릭합니다.
4. 이제 모듈을 100번 등록하면 힙메모리가 증가합니다.
5. 모듈 B를 동적으로 등록 취소하려면 "등록 취소" 버튼을 100회 클릭합니다.
6. 히프 메모리를 다시 확인합니다.이 시점에서 100 모듈의 등록 해제로 인해 메모리 사용량이 급증합니다.

생각할 수 있는 해결책:

인스턴스화된 동일한 함수 범위에서 oldVm 인스턴스를 참조 해제합니다(resetStoreVM()).

resetStoreVM 함수에 다음 코드를 추가하면 위와 같이 할 수 있습니다.

function resetStoreVM (store, state, hot) {
var oldVm = store._vm;

...
...

if (oldVm) {
  if (hot) {
    // dispatch changes in all subscribed watchers
    // to force getter re-evaluation for hot reloading.
    store._withCommit(function () {
      oldVm._data.$$state = null;
    });
  }

  // Existing Code
  Vue.nextTick(function () { return oldVm.$destroy(); });

  // The OldVm Object is still in heap even after destroy
  // Appropriate Code
  oldVm.$destroy(); 
  oldVm = null;
}

참고로 Google chrome(V 72.0.3626.96) 힙 스냅샷을 첨부했습니다.

언급URL : https://stackoverflow.com/questions/54671230/memory-leak-happening-while-using-registermodule-unregistermodule-in-vuex