Optimierung der Winkelformvalidierung mit Lazy Load

Lazy Loading ist eine Technik, die verwendet wird, um die Leistung von Webanwendungen zu verbessern, indem nur der erforderliche Code und die erforderlichen Ressourcen geladen werden, wenn sie benötigt werden. Dies kann besonders bei großen und komplexen Anwendungen nützlich sein, da es dazu beitragen kann, die anfängliche Ladezeit zu verkürzen und die allgemeine Benutzererfahrung zu verbessern.

Kürzlich musste ich einen Blockchain-Adressvalidator in eines unserer Formulare implementieren. Meine Suche ergab eine alte Open-Source-Bibliothek, die mir dabei helfen könnte, aber ihre Größe war über 200 KB. Ich wollte nicht alles ohne Grund laden, also habe ich einen asynchronen Validator erstellt, der die Bibliothek nur lädt, wenn ich sie brauche:

function addressValidator(): AsyncValidatorFn {
  return function (control) {
    return import('address-validator-package-name').then((m) => {
      return m.validate(control.value) ? null : { invalidAddress: true };
    });
  };
}

@Component({ ... })
export class FormComponent {
  addressControl = new FormControl('', {
    asyncValidators: addressValidator(),
  });
}

export const ADDRESS_VALIDATOR = new InjectionToken<AsyncValidatorFn>(
  'ADDRESS_VALIDATOR'
);

const addressValidator = {
  provide: ADDRESS_VALIDATOR,
  useFactory(): AsyncValidatorFn {
    const cdr = inject(ChangeDetectorRef);

    return (control) => {
      return import('address-validator-package-name').then((m) => {
        cdr.markForCheck();
        return m.validate(control.value) ? null : { invalidAddress: true };
      });
    };
  },
};
@Component({
  providers: [addressValidator]
})
export class FormComponent {
  addressControl = new FormControl('', {
    asyncValidators: inject(ADDRESS_VALIDATOR),
  });
}