perf: prevent compiling translations with very large values (#880)

Co-authored-by: max.kless@googlemail.com <max.kless@googlemail.com>

docs/concepts/localization.md

@@ -83,6 +83,8 @@ The PWA uses an [ICU Message Format](https://unicode-org.github.io/icu/userguide
 
 Have a look at the spec for [PWATranslateCompiler](../../src/app/core/utils/translate/pwa-translate-compiler.spec.ts) for an overview of supported methods.
 
+> :warning: Translations with large values (> 1000 characters) will not be compiled to improve performance. We recommend using CMS components instead. If you _really_ need to increase this limit, adapt the `MAX_COMPILATION_LENGTH` variable of [PWATranslateCompiler](../../src/app/core/utils/translate/pwa-translate-compiler.ts).
+
 ### Localization with Formatted Dates
 
 The date pipe is used as formatter in texts with dates.

src/app/core/utils/translate/pwa-translate-compiler.ts

@@ -1,4 +1,4 @@
-import { Injectable, Injector } from '@angular/core';
+import { Injectable, Injector, isDevMode } from '@angular/core';
 import { TranslateCompiler, TranslateService } from '@ngx-translate/core';
 
 import { Translations } from './translations.type';
@@ -9,6 +9,8 @@ const cache: Record<string, Function> = {};
 export class PWATranslateCompiler implements TranslateCompiler {
   constructor(private injector: Injector) {}
 
+  private static MAX_COMPILATION_LENGTH = 1000;
+
   /**
    * regular expression for grabbing everything in the form:
    * {{<variable>, plural/select, <case>...<case>}}
@@ -124,10 +126,22 @@ export class PWATranslateCompiler implements TranslateCompiler {
     return template;
   }
 
+  private sanityCheck(key: string, value: string | Function): boolean {
+    const sane = typeof value !== 'string' || value.length <= PWATranslateCompiler.MAX_COMPILATION_LENGTH;
+    if (isDevMode() && !sane) {
+      console.warn(
+        'Not compiling translation with key',
+        key,
+        'as it is too big! - Use CMS! - This is a development mode only warning and can be ignored if the behavior is intended.'
+      );
+    }
+    return sane;
+  }
+
   compileTranslations(translations: Translations): Translations {
     return Object.entries(translations)
       .map<[string, string | Function]>(([key, value]) => {
-        if (this.checkIfCompileNeeded(value)) {
+        if (this.sanityCheck(key, value) && this.checkIfCompileNeeded(value)) {
           return [key, this.compile(value as string)];
         }
         return [key, value];