Tengo que diseñar e implementar un tablero de visualización que se ejecute solo en el navegador usando Vue.js, D3 y JS. El conjunto de datos, un archivo .json, tiene 48 MB. Cuando analizo el archivo usando d3.json(), el administrador de tareas de Google Chrome me muestra que el código Javascript usa alrededor de 450 MB de memoria. Quiero poder actualizar de manera eficiente los diferentes gráficos en el panel de visualización, lo cual es posible cuando mantengo el objeto de datos en la memoria.
Así es como actualmente cargo los datos. Luego puedo acceder a él en el estado de la tienda Vuex.
actions: { loadData(state) { d3.json('filename.json').then((data) => { state.data = data; }) }, }¿Tiene alguna recomendación/forma común de cómo puedo reducir el uso de la memoria? Una forma obvia sería volver a analizar el archivo .json cada vez que necesite acceder a los datos, pero esto aumentaría el tiempo de cálculo.
(ACTUALIZAR)
Un colega mío encontró una solución al problema y quería compartirla con ustedes:
Cuando el objeto de datos analizado se guarda en el estado de la tienda de Vuex, Vue lo vuelve reactivo, de modo que los componentes de Vue pueden actualizarse de forma reactiva si cambia el estado de la tienda de Vuex.
Esto puede ser evitado por
Object.freeze(data); state.data = data;lo que hace que el objeto de datos no sea reactivo. El aumento del rendimiento y la disminución del uso de RAM a partir de esto son significativos.
En mi caso, el uso de RAM disminuyó de alrededor de 450 MB a 50 MB, mientras que la carga del conjunto de datos en el estado de la tienda Vuex tomó aproximadamente 3 segundos. en lugar de alrededor de 25 segundos.