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
は追加したとして、こんな感じで。
これだと、一旦空のページを挟むので、自然と遷移しているように見えるハズ。
無理矢理ではあるけど、こういうのもテクニック(?)
リークの原因はちゃんと調べないと、そのうちやばい手に負えない感じになってしまいそう・・・。