Naviguez entre les pages à l'aide de Leaflet.js + Vue.js - problème de fuite de mémoire résolu

Question

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.

Answer 1

Je ne suis pas un expert en vue, mais je suis presque sûr que le problème est que vous ne détruisez pas correctement la carte du dépliant. Vous devez appeler map.remove() (https://leafletjs .com/reference.html#map-remove), sinon le nœud DOM contenant la carte restera en mémoire, même si votre composant a disparu depuis longtemps.

Une fois que vous revenez à la page d'accueil, vue router détruira votre MapComponent，并且您可以使用 destroyed hook de cycle de vie pour supprimer sa carte de dépliant. Voir ce violon : https://jsfiddle.net/wuo15b4L/