Huge string (50MB) makes vue devtools hang for 15-20 seconds

[TheNewSound]

Version

4.1.5

Browser and OS info

Firefox / Windows 10

Steps to reproduce

in your vue component:

data: function () {
return {
csvFile: " (insert 50 MB string here)"
}
}

When i use vue devtools, vue devtools tries to read my whole variable.....

please add variable size limitations, so when a variable is to big to show, it will only show the first megabyte of data and then say (string too big) or smth.

What is expected?

vue devtools not hanging

What is actually happening?

vue devtools is hanging for 15-20 seconds

---

In my application, I load a 50MB CSVfile into localStorage (and set this.csvFile = "file-as-string")

[jameshulse]

Hi @TheNewSound, I had a similar slow-down with a large amount of data. There is a feature in Vue which will skip adding change detection if you freeze your object first using Object.freeze.

So in your example you may want something like:

data: function() {
    return {
        csvFile: Object.freeze({ content: "..big string.." }),
    };
},

I haven't tested whether you can freeze the data object directly so I have wrapped your string in another object.

See: https://vuejs.org/v2/guide/instance.html#Data-and-Methods which now mentions the usage of Object.freeze.

[TheNewSound]

Hi @TheNewSound, I had a similar slow-down with a large amount of data. There is a feature in Vue which will skip adding change detection if you freeze your object first using Object.freeze.

So in your example you may want something like:

data: function() {
    return {
        csvFile: Object.freeze({ content: "..big string.." }),
    };
},

I haven't tested whether you can freeze the data object directly so I have wrapped your string in another object.

See: https://vuejs.org/v2/guide/instance.html#Data-and-Methods which now mentions the usage of Object.freeze.

But I do want Vue's reactivity 😄 . I just don't want the devtools to hang ;)

[jameshulse]

In that case I would suggest installing the latest 5.0 beta build of dev tools. I know a lot of work was done on handling large amounts of data and in optimisation in general.