Skip to content

Performance optimization: Introduce pure translatePipe #1490

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
endlacer opened this issue Sep 13, 2024 · 4 comments
Open

Performance optimization: Introduce pure translatePipe #1490

endlacer opened this issue Sep 13, 2024 · 4 comments

Comments

@endlacer
Copy link

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?

  1. Implement a new pure pipe alongside the existing impure pipe.
  2. The pure pipe would function similarly to the current pipe but would not automatically trigger on every change detection cycle.
  3. 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.
  4. 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.

@eneajaho
Copy link

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
Copy link
Author

This is interesting, thank you!

@eneajaho
Copy link

@rbalet
Copy link
Collaborator

rbalet commented May 26, 2025

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants