Extremely Slow when a language file is getting large

[stanleyyuenyiu]

Assume 3 Languages, each language contains 600 translations

Assume 10 pages, each page avg using 30 unique translations

Step 1: navigate to each page (using react Route)
Step 2: switch lang after visited all pages

Excepted result: execute time within 500ms

Actual Result: execute time >=7000ms

Additional
execute time will be within 300ms, if translations less than 200

[ryandrewjohnson]

Can you create an example that reproduces the slowness in codesandbox? This is an issue that really needs a working example that matches your exact setup.

[thchia]

This caught my attention because some time back I encountered a related issue. If I was navigating from (say) one page to another (using react-router), there would be a noticeable delay between clicking the Link and the subsequent page rendering.

I avoided it at the time by disabling the default translate option, but this is obviously 1) a workaround and 2) not addressing the underlying issue.

I have attempted some basic profiling, not something I have done a lot but the results are revealing. A culprit appears to be the .reduce call in getTranslationsForLanguage. When I swapped this with a for ... in loop, the times dropped dramatically.

Original implementation:

with for ... in:

Both cases run from a fresh mount of the app into the DOM (i.e. after browser refresh).

@ryandrewjohnson I don't really have the bandwidth to set up a load testing, so maybe we can publish a beta/canary/rc for @stanleyyuenyiu to test out?

[Edit] For interest, the profile data showing the culprit:

[ryandrewjohnson]

@thchia interesting findings. I just did some JSPerf tests to confirm the array.reduce vs for-loop speeds, and it looks like you're right. When acting on a low count of records the array.reduce outperforms the forloop. But crank up the record count and the reverse is true, which is showing in your tests.

At least with this arbitrary test it's showing a HUGE diff when the list.length gets high.

With list.length = 10000

With list.length = 100

Here's the link to the test in case you want to play around.
https://jsperf.com/array-reduce-test-ryan/1

[stanleyyuenyiu]

Thanks for the sharing, but we already change to use react context directly, where no delay, and all translate request within 200ms for >600 translation keys

[ryandrewjohnson]

I have created a PR to start tracking the work on these performance improvements. #92

[stanleyyuenyiu]

will check next week

[ryandrewjohnson]

Fixed in #92.

[ryandrewjohnson]

@stanleyyuenyiu I've just published a new version v3.1.1 that has the performance improvement fixes. If you could give it a try when you get a chance, and let me know if it improves any of the issues you were having that'd be greatly appreciated.

[ryandrewjohnson]

Closing this due to inactivity. Please re-open if issue persists.