Leaflet.js + Vue.js を使用してページ間を移動する - メモリ リークの問題が解決されました

Question

多くの Leaflet マップを含む Vue.js アプリケーションを作成しようとしています。

次の jsfiddle は、作成しようとしているアプリケーションの例です:

https://jsfiddle.net/RayLa/vr2b6ad7/126/

特定のマップ コンポーネントは次のとおりです:

リーリー

アプリケーションには、「ホーム」ページと「マップ」ページの 2 つのページが含まれています。 「マップ」ページにはチラシマップが含まれています。アプリケーションは次のようになります:

問題は、マップ ページからホームページに移動し、再び戻ると、大量のメモリ リークが発生しているように見えることです。 Chrome 開発者ツールの [メモリ] タブで、起動時にアプリケーションによって使用されるメモリの量が以下に表示されます (73.8MB):

「ホーム」ページから「マップ」ページまで複数回クリックすると、アプリケーションによって使用されるメモリ量は次のとおりです (739MB):

2 つのページ間でクリックし続けると、メモリ不足により最終的にアプリがクラッシュします。 メモリリークの原因がわかりません。

コンポーネントをアンロードして、関連するすべてのデータをメモリから消去するにはどうすればよいですか?

この問題の解決方法を知っている人はいますか?これが Vue.js の Leaflet.js と関係があるかどうかはわかりません。

Answer 1

私は Vue の専門家ではありませんが、リーフレット マップを適切に破棄していないことが問題だと確信しています。 map.remove() (https://leafletjs .com/reference.html#map-remove) を呼び出す必要があります。そうしないと、マップを保持する DOM ノードがメモリ内に残ります。コンポーネントがとうになくなってしまった場合でも。

ホーム ページに戻ると、vue ルーターは MapComponent を破棄し、destroyed ライフサイクル フックを使用してリーフレット マップを削除できます。このフィドルを参照してください: https://jsfiddle.net/wuo15b4L/