typeof Diary

VimとかJSとか。やったことのメモ。自分のため。

Electron、メモリリークの対策?

Electronのアプリをレンダラ側はVueで書いています。
ログイン画面→トップ画面みたいな2画面構成。

ログイン、ログアウトを繰り返すとやたらとメモリリークしていました。 何かが破棄しきれていないんだろうけど、スナップショットから見つけるのも結構苦労しそうでした。

VUE_DEV_TOOLだったり、global:appみたいなのだったり・・・。

画面をリロード

画面をリロードしてやれば、メモリリークは一時しのぎでもなんとかなりそうです。

{ remote } from 'electron'
router from '@/router'

export default {
  // ...
  handleClickLogout() {
    // Vuexストアのリセットとか...
    remote.getCurrentWindow().reload()
    router.push('/login')
  }
}

こんな感じにしておけば、リロードされてメモリは開放されます。

ひとつ問題が。
これだとタイミング次第で、元のページがリロード→ログイン画面にいく場合と、ログイン画面にいく→リロード→ログイン画面が再描画。
みたいなことになりました。

前者はそこまで違和感はないですが、後者はユーザ的には良くない動きでしょう。
気になる人はめっちゃ気になるはず。

画面遷移の違和感をなくす

この違和感を取り去りましょう。

空divだけのコンポーネントを間に挟んでみます。

<template>
  <div></div>
</template>

<script>
import router from '@/router'

export default {
  name: 'Empty',

  mounted() {
    setTimeout(() => router.push('/login'), 1000)
  }
}
</script>
handleClickLogout() {
  // ...
  remote.getCurrentWindow().reload()
  router.push('/empty')
}

routerに/emptyは追加したとして、こんな感じで。
これだと、一旦空のページを挟むので、自然と遷移しているように見えるハズ。

無理矢理ではあるけど、こういうのもテクニック(?)

リークの原因はちゃんと調べないと、そのうちやばい手に負えない感じになってしまいそう・・・。