Ottimizzazione della convalida della forma angolare con Lazy Load

Il lazy loading è una tecnica utilizzata per migliorare le prestazioni delle applicazioni Web caricando solo il codice e le risorse necessari quando necessario. Questo può essere particolarmente utile in applicazioni grandi e complesse, in quanto può aiutare a ridurre il tempo di caricamento iniziale e migliorare l'esperienza complessiva dell'utente.

Recentemente avevo bisogno di implementare un validatore di indirizzi blockchain in uno dei nostri moduli. La mia ricerca ha rivelato una vecchia libreria open source che potrebbe aiutarmi in questo, ma la sua dimensione era superiore a 200 kb. Non volevo caricare tutto senza motivo, quindi ho creato un validatore asincrono che carica la libreria solo quando ne ho bisogno:

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