How to fetch big data in vue-CodePudding

Csv Link:https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/owid-covid-data.csv

Hello, I need to import the above csv file, but I need to do it from this link to be up to date. When I take this data and use pinia for storage data, about 700mb is added to my memory usage every time I refresh the page. Since I don't know the backend, I need to fetch and use the data like this.

What should I do so that the memory usage does not increase every time I refresh the page?

Pinia Code:

import {defineStore} from "pinia";
import {computed, ref} from "vue";

export const useCovidDataStore = defineStore('covidData', () => {
    const data = ref(null)
    const loaded = ref(false)
    const selectedCountry = ref('Germany')

    function setData(veri) {
        data.value = veri
    }
    function setCountry(country) {
        selectedCountry.value = country
    }
    function setLoaded() {
        loaded.value = !loaded.value

    }

    const getData = computed(() => data.value)
    const getLoaded = computed(() => loaded)
    const getSelectedCountry = computed(()=>selectedCountry)
    return {data, setData, getData, setLoaded, getLoaded, loaded,selectedCountry,setCountry,getSelectedCountry}
})

Data Code:

Papa.parse("https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/owid-covid-data.csv", {
    download: true,
    header: true,
    complete: function(results) {
      const groupedByLocation = results.data.reduce((acc, obj) => {
        if (!acc[obj.location]) {
          acc[obj.location] = [];
        }
        acc[obj.location].push(obj);
        return acc;
      }, {});
      store.setData(groupedByLocation)

    }
    
  })

CodePudding user response：

When you have a huge amount of data you can either:

use some pagination to get only some chunks and not the whole thing
use a middleware backend/serverless function to do that work on a more appropriate place

No other magic sauce. .slice'ing on the frontend will not make the loading of the page more performant, just reduce the DOM overhead of injecting all of those nodes.

Memoization can also help, but not on the initial load.