Optimización de la validación de formulario angular con carga diferida

La carga diferida es una técnica utilizada para mejorar el rendimiento de las aplicaciones web al cargar solo el código y los recursos necesarios cuando se necesitan. Esto puede ser especialmente útil en aplicaciones grandes y complejas, ya que puede ayudar a reducir el tiempo de carga inicial y mejorar la experiencia general del usuario.

Recientemente necesité implementar un validador de direcciones de blockchain en uno de nuestros formularios. Mi búsqueda arrojó una antigua biblioteca de código abierto que podría ayudarme con eso, pero su tamaño superaba los 200 kb. No quería cargarlo todo sin ningún motivo, así que creé un validador asíncrono que carga la biblioteca solo cuando la necesito:

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),
  });
}