search

ngx-translate / core

The internationalization (i18n) library for Angular
MIT License
4.53k stars 578 forks source link

Performance optimization: Introduce pure translatePipe #1490

Open endlacer opened 2 months ago

endlacer commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

This is interesting, thank you!

eneajaho commented 2 months ago

Shameless plug https://justangular.com/blog/async-pipe-is-not-pure