0

What I'm building
There is this game Path of Exile, that has a passive tree that i'm recreating in my Vue application with help from Pixi Js. The game developers release a json with the data for this passive tree every expansion for people to work with.

The Tree: https://www.pathofexile.com/passive-skill-tree
The json: https://github.com/EmmittJ/SkillTree_TypeScript/blob/master/data/3.12.0-pre/SkillTree.json (Don't forget to press the "View raw" link)
Sandbox i created with a variation where i tried to do it with fetch(): https://codesandbox.io/s/sharp-kalam-hzvt4?fontsize=14&hidenavigation=1&theme=dark

The Problem
While working with this json data and Pixi js to draw this tree i'm running into some performance issues. With all the different variations i tried i either get large memory leaks after a while (on this i'm most concerned), or the whole json is loaded in my production bundle so those files are huge, or both. At this point i tried so much stuff i'm not sure what to do anymore.

What i'm looking for
I'm looking to build a <tree> component in my Vue app with the data from this json that is just static in a /data folder (will change every 3 months at max), and with that data run some functions to draw the passive tree on my canvas. When this tree is drawn i still want to be able to dynamically change things on the canvas. This what the structure of the site should look like for now:

enter image description here

What i tried
There are of course multiple ways to get the json data and work with it, but all seem to run in some kind of issues. I tried using Axios, Fetch, just a import, put it in my state, and put it in a static data object. But in the end i feel like my JS Heap always looks something like this:

enter image description here

Sandbox
I created a sandbox with a variation where i load the data with fetch():
https://codesandbox.io/s/sharp-kalam-hzvt4?fontsize=14&hidenavigation=1&theme=dark

Anyone who can help me out how i should go about this?

Awesom-o
  • 534
  • 6
  • 20
  • Its like `this.app.destroy();` is not being called in `beforeDestroy` hook – Józef Podlecki Dec 19 '20 at 16:08
  • Hi Józef, hmm indeed when i check this.app after detroy there still seems to be something there. Not sure why this is. Also, am i doing the rest correctly when i just want to use the json data to draw the tree and then never use it again? – Awesom-o Dec 19 '20 at 17:24
  • You could cache response data, store it somewhere in window object, or [vue mixin](https://stackoverflow.com/questions/40896261/apply-global-variable-to-vuejs) – Józef Podlecki Dec 20 '20 at 13:34

0 Answers0