多くの Leaflet マップを含む Vue.js アプリケーションを作成しようとしています。
次の jsfiddle は、作成しようとしているアプリケーションの例です:
https://jsfiddle.net/RayLa/vr2b6ad7/126/
特定のマップ コンポーネントは次のとおりです:
リーリーアプリケーションには、「ホーム」ページと「マップ」ページの 2 つのページが含まれています。 「マップ」ページにはチラシマップが含まれています。アプリケーションは次のようになります:
問題は、マップ ページからホームページに移動し、再び戻ると、大量のメモリ リークが発生しているように見えることです。 Chrome 開発者ツールの [メモリ] タブで、起動時にアプリケーションによって使用されるメモリの量が以下に表示されます (73.8MB):
「ホーム」ページから「マップ」ページまで複数回クリックすると、アプリケーションによって使用されるメモリ量は次のとおりです (739MB):
2 つのページ間でクリックし続けると、メモリ不足により最終的にアプリがクラッシュします。 メモリリークの原因がわかりません。
コンポーネントをアンロードして、関連するすべてのデータをメモリから消去するにはどうすればよいですか?
この問題の解決方法を知っている人はいますか?これが Vue.js の Leaflet.js と関係があるかどうかはわかりません。
P粉3402642832024-01-09 11:08:37
私は Vue の専門家ではありませんが、リーフレット マップを適切に破棄していないことが問題だと確信しています。 map.remove() (https://leafletjs .com/reference.html#map-remove) を呼び出す必要があります。そうしないと、マップを保持する DOM ノードがメモリ内に残ります。コンポーネントがとうになくなってしまった場合でも。
ホーム ページに戻ると、vue ルーターは MapComponent を破棄し、destroyed ライフサイクル フックを使用してリーフレット マップを削除できます。このフィドルを参照してください: https://jsfiddle.net/wuo15b4L/