vue-leaflet/Vue2Leaflet

large CPU and Memory usage on open Vue devtool window

Open

#404 opened on Jun 13, 2019

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (1,942 stars) (380 forks)batch import
confirmedhelp wanted

Description

My application uses a web socket to update markers and show transport . When I open devtool, I see a huge amount of events [ready $emit by LGeoJson] Chrome uses 2GB, the CPU goes to a zone above 60% On my map about 20 static LGeoJson and 100 static event markers are displayed. Even with such a small number of objects, I get crash vue devtool.

If I go to tab "Events" and push "clear" events, the memory is released, there is no load CPU and no crush devtool.

Next, I add transport objects whose coordinates change dynamically on a web socket and see events [update: latLng $emit by LMarker] There are a lot of them and it is very difficult to track down the desired event.

I understand that the problem is most likely in dev tools, but is it possible to disable map objects from $emit?

Browsers Affected

  • Chrome 75.0.3770.80 vue devtool 5.1.0

Versions

Leaflet: v1.5.1
Vue: v2.6.7
Vue2Leaflet: v2.1.1

Contributor guide

Tech stack
javascriptvue
Domain
frontendperformance
Issue type
performance
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Vue.jsLeafletEvent handling
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Investigate the Vue2Leaflet source code, specifically the LGeoJson and LMarker components, to understand how events are emitted. Look for any existing option to suppress events or consider adding a prop like 'disable events'. Review the Vue Devtools documentation for event filtering. The issue reporter suggests disabling $emit on map objects; this could be achieved by adding a conditional emit guard.