Naviguez entre les pages à l'aide de Leaflet.js + Vue.js - problème de fuite de mémoire résolu
J'essaie de créer une application Vue.js contenant de nombreuses cartes Leaflet.
Le jsfiddle suivant est un exemple de l'application que j'essaie de créer :
https://jsfiddle.net/RayLa/vr2b6ad7/126/
Les composants spécifiques de la carte sont les suivants :
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);
})
}
};
L'application contient deux pages, une page "Accueil" et une page "Carte". La page Cartes contient des cartes en dépliant. L'application ressemble à ceci :
Le problème est que lorsque je navigue de la page Carte à la page d'accueil et vice-versa, il semble y avoir une fuite de mémoire massive. Depuis les outils de développement Chrome, sous l'onglet Mémoire, la quantité de mémoire utilisée par l'application au démarrage est indiquée ci-dessous (73,8 Mo) :
Lorsque je clique plusieurs fois de la page « Accueil » vers la page « Carte », la quantité de mémoire utilisée par l'application est la suivante (739 Mo) :
Si je continue de cliquer entre les deux pages, l'application finit par planter à cause d'un manque de mémoire. Je n'arrive pas à comprendre la cause de la fuite de mémoire.
Comment décharger un composant pour que toutes les données associées soient effacées de la mémoire ?
Est-ce que quelqu'un sait comment résoudre ce problème ? Je ne sais pas si cela a à voir avec Leaflet.js pour Vue.js.
