Devtools performance/memory usage issue with rapid updates

[bbugh]

Version

4.0.1

Browser and OS info

Chrome 63.0.3239.132 (Official Build) (64-bit) / macOS Sierra 10.12.6

Steps to reproduce

Using this timer state module, have a tick action listener somewhere, and do a bunch of commits every time. (This is for a game currently running at 5 fps)

const FRAMES_PER_SECOND = 5

const state = {
  updateInterval: 1000 / FRAMES_PER_SECOND,
  timeDelta: 0,
  lastUpdateTime: null
}

const actions = {
  startTimer ({ state, commit, dispatch }) {
    if (state.lastUpdateTime) { return }

    state.lastUpdateTime = new Date().getTime()
    setInterval(() => {
      commit('updateTime')
      dispatch('tick', { timeDelta: state.timeDelta })
    }, state.updateInterval)
  }
}

const mutations = {
  updateTime (state) {
    const elapsed = new Date().getTime() - state.lastUpdateTime

    state.timeDelta = elapsed
    state.lastUpdateTime = new Date().getTime()
  }
}

export default {
  state,
  actions,
  mutations
}

What is expected?

The devtools perform smoothly and don't take up massive amounts of RAM.

What is actually happening?

Shortly after starting the app, the devtools run very slowly. The memory rises until it eventually takes up all available RAM. At some point I have to kill it, causing the extension to crash.

---

It may be that I'm crazy and experimenting with Vue/Vuex for something it's not intended to be used for (a game with a lot of calculations, aka an incremental game). Maybe Vuex is designed for standard UI with small amount of events and commits? (If this amount of updates is a bad idea, I'd love to know before I sink more time into it.)

Here's how it's working: Every tick (currently 5 ticks per second) an update check is run, and player's resources are incremented based on some math so that they get X per second (using timeDelta). There's currently 5 commits, so 5x5 updateTime = 26 commits per second. If a player clicks a button, it also does some progress bar math (in a separate state module).

Pausing the execution of the app and then scanning through the devtools, I see that there aren't any unexpected commits, and there's almost no math more complicated than var += 1 going on. The app itself seems to be running perfectly fine performance-wise, but the devtools are choking almost immediately after launching the app. It seems that it can't handle large amounts of frequent commits?

Thanks for a really spectacular tool and Vue in general.

[Akryum]

If Vuex recording is enabled, the dev tools takes a JSON snapshot of the entire Vuex state and getters each time a mutation is committed.

[posva]

You can and probably should stop recording Vuex mutations. @Akryum maybe this can be moved to a WebWorker in the future and limit the size of mutations saved in the log (and do the same for events)

[Akryum]

Let's continue in #546