Nel framework Angular non è importante solo l'introduzione di nuove funzionalità, ma anche l'ottimizzazione delle prestazioni. La versione 16 ha segnato un passo importante in questa direzione, con un focus particolare sul miglioramento del motore di rendering e sulla riduzione delle dimensioni dei bundle.

Uno dei punti cruciali dell'evoluzione di Angular 16 è stato il notevole miglioramento del motore di rendering. Grazie a queste ottimizzazioni, il tempo impiegato per la visualizzazione iniziale delle pagine, e la navigazione tra le varie sezioni dell'applicazione, è stato drasticamente ridotto. Portando un esempio: la visualizzazione di una lista di elementi con il componente *ngFor è notevolmente accelerata e meno gravosa in termini di risorse.

<div *ngFor="let item of items">
  <!-- template da visualizzare per ogni elemento -->
</div>

Un'altra priorità per Angular 16 è stata la riduzione delle dimensioni dei bundle. Attraverso l'ottimizzazione del processo di tree-shaking e la riduzione del codice superfluo sono prodotte applicazioni con dimensioni significativamente minori.

Questa miglioria va a ridurre il carico di lavoro sul browser, sia in termini di download che di interpretazione, attività che possiamo perfezionare importando solo la sezione specifica della libreria, come nell'esempio seguente.

import { map } from 'rxjs/operators';

Piuttosto che importare l'intera libreria RxJS, l'importazione selettiva di operatori, come map, aiuta a mantenere il bundle finale leggero.