Navigasi antara halaman menggunakan Leaflet.js + Vue.js - isu kebocoran memori diselesaikan
Saya cuba membuat aplikasi Vue.js yang mengandungi banyak peta Risalah.
Jsfiddle berikut ialah contoh aplikasi yang saya cuba buat:
https://jsfiddle.net/RayLa/vr2b6ad7/126/
Komponen peta khusus adalah seperti berikut:
const MapComponent = {
template: '<div id="map">About</div>',
mounted(){
let map = L.map('map').setView([51.505, -0.09], 8);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
fetch("https://raw.githubusercontent.com/martinjc/UK-GeoJSON/master/json/administrative/gb/lad.json")
.then((response) => response.json())
.then((data) => {
L.geoJSON(data).addTo(map);
})
}
};
Aplikasi ini mengandungi dua halaman, halaman "Rumah" dan halaman "Peta". Halaman Peta mengandungi peta risalah. Apl kelihatan seperti ini:
Masalahnya ialah apabila saya menavigasi dari halaman Peta ke halaman Utama dan kembali semula, nampaknya terdapat kebocoran memori yang besar. Daripada Alat Pembangun Chrome, di bawah tab Memori, jumlah memori yang digunakan oleh aplikasi semasa permulaan ditunjukkan di bawah (73.8MB):
Apabila saya mengklik beberapa kali dari halaman "Laman Utama" ke halaman "Peta", jumlah memori yang digunakan oleh aplikasi adalah seperti berikut (739MB):
Jika saya terus mengklik antara dua halaman, aplikasi akhirnya ranap kerana kekurangan ingatan. Saya seperti tidak dapat mengetahui punca kebocoran memori.
Bagaimana untuk memunggah komponen supaya semua data berkaitan dikosongkan daripada memori?
Ada sesiapa tahu bagaimana untuk menyelesaikan masalah ini? Saya tidak pasti sama ada ini ada kaitan dengan Leaflet.js untuk Vue.js.
