Skip to content
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

Performance optimization: Introduce pure translatePipe #1490

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

Performance optimization: Introduce pure translatePipe #1490

endlacer opened this issue Sep 13, 2024 · 3 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

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

3 participants