ngx-translate
perf(pipe): pure
Current behavior
The ngx-translate package currently provides an impure Angular pipe for translations. This results in thousands of function calls, especially on pages with numerous pipe calls for translations/internationalization. This behavior can lead to performance issues, particularly on complex or data-heavy pages.
Expected behavior
The package should provide a pure version of the translation pipe. This would significantly reduce the number of function calls and improve performance, especially on pages with many translated elements.
What is the motivation / use case for changing the behavior?
The primary motivation is to improve performance in Angular applications using ngx-translate, especially those with a large number of translated elements. By reducing the number of function calls, we can potentially see significant performance improvements, particularly on complex or data-heavy pages.
How do you think that we should implement this?
- Implement a new pure pipe alongside the existing impure pipe.
- The pure pipe would function similarly to the current pipe but would not automatically trigger on every change detection cycle.
- Leave it to the user to manage change detection for translations, for example by reloading the whole page when the language changes or manually triggering change detection when needed.
- Provide clear documentation on how to use the pure pipe effectively, including best practices for managing translations and change detection.
This approach would provide a performance-optimized option for users who are willing to manage change detection themselves, while still keeping the current functionality available for those who prefer it.
The translate pipe, does already have caching. The pure pipe does caching at the "angular" level, while translate pipe does it inside the transform.
Async pipe is also a unpure pipe, and they do caching too, so it's fine I guess, and won't make a difference.
@endlacer Old topic, but I'm wondering if you still see the use of it.
I'm asking cause I think that, if you're willing to handle the reload of a page on your own, then why not just using the official angular i18n library -> https://angular.dev/guide/i18n as it's way "cleaner" and optimised. (Although it has his drawback and I'm therefore also using ngx-translate library, for Ionic usage as example).
I'm wondering though, if this wouldn't be possible to trigger an angular zone detection on language change & any language file addition.
That way the pipe could be set to pure, but the "auto reload" would still be working.
I'll investigate if people are interested into this one (Or any one else is welcome to open an PR in that regard). But I wouldn't create two pipes as this would increase the complexity of the library.
I'm closing this issue as this is impossible to subscribe to a signal change without inpure pipe.
@endlacer Let me know if I'm wrong