Handle large files

[praneshr]

Try introducing the windowing technique to handle large DOM nodes.

[taeyangee]

Encounter the same problem，looking forward optimization~

[cczz598]

I need to diff large text(145k) with 90% difference, but actually the browser crashed when rendering large text. I'm also looking forward your optimization~

[skyunBoss]

How long does it take

[praneshr]

@skyunBoss - I don't have a timeline for it. I'm experimenting with few techniques. But, I'll address this issue soon!

[Azrog]

Would the use of a web worker help? https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API

[SamSamskies]

@praneshr I also have to support large diffs and my temporary solution is to display a spinner and put a message that this may take a while if the changeset is huge 😂.

Have you thought about using react-virtual (https://github.com/tannerlinsley/react-virtual) to solve the issue? Here's examples of using react-virtual https://codesandbox.io/s/github/tannerlinsley/react-virtual/tree/master/examples/sandbox.

[praneshr]

@SamSamskies Thanks for the comment. Yes, I've explored the windowing option. But, I don't have the bandwidth to work on it now. So, I cannot guarantee a release date. Sorry.

[SamSamskies]

@praneshr np. I'll try and take a crack at it if I get some bandwidth myself.

[SamSamskies]

Would the use of a web worker help? https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API

I think the main problem is the number of DOM nodes generated for large diffs, so I don't think web workers would help much.

[souljuse]

I am guessing that the problem stems from the "diff" library in the dependencies. It has the same unsolved issue with large diffs -> https://github.com/kpdecker/jsdiff/issues/163

I suggest using https://github.com/google/diff-match-patch for handling large diffs

[josephwaiguru]

Is there are progress on this one ?

[hperrin]

I'm hitting this one as well on a diff between two 3kb strings. The page essentially freezes and must be killed by the browser's task manager. The problem is definitely in the diff library (not this one), so I think it would be better to switch to another diff library.

[hperrin]

Check out this package: https://www.npmjs.com/package/diff-match-patch

You can essentially get the same characteristics using diff_main as a substitute for "character" diffing, and diff_cleanupSemantic on the resulting diff for "word" diffing.

Since you first operate on a line diff though, you'll need this part: https://github.com/google/diff-match-patch/wiki/Line-or-Word-Diffs

There is also a section in there about actual word diff mode, if using the semantic cleanup is not appropriate.

[lordprana]

Would have liked to use this package, but I need this feature. Had to find another solution.

[gladsonrobinson]

Any updates on it. Or any one got an alternate solution for it.

[gladsonrobinson]

@lordprana Have you find any solution for the large data?

[usutaria]

So I figured that if you use json.Stringify(jsonstr, null, 2) to format the string first and then use json diff viewer then it's faster to compare.

[usutaria]

One can also try react-diff-viewer-continued along with json string formatted for new line using json.stringify(jsonstr, null, 2).

[m-s-abeer]

Any progress on this issue?

[jfaMan]

I am guessing that the problem stems from the "diff" library in the dependencies. It has the same unsolved issue with large diffs -> kpdecker/jsdiff#163

I suggest using https://github.com/google/diff-match-patch for handling large diffs

It looks like someone potentially fixed the issue and a new release is in the works though the owner of that library doesn't seem to be all that active either.

This library would then need to be updated with it, but seeing as @praneshr doesn't seem to be working on this anymore, there might be more luck hoping for an update to the forked react-diff-viewer-continued instead.