Dauðr Blog

Polyfill condizionali in Angular v7

May 18, 2019

Se hai un progetto Angular v7 e non hai l’occasione di fare l’upgrade a quella che sarà l’ottava versione o vuoi semplicemente testare una delle piccole funzionalità che saranno molto utili quando la nuova versione verrà rilasciata, qui troverai una semplice guida su come fare.

Danza delle anime

Foto di Ahmad Odeh su Unsplash

Il trucco

Nello sviluppo di Angular, usiamo Typescript con un sacco di feature Javascript moderne. Di queste, però, non tutte sono compatibili con i browser degli utenti indi per cui quando generiamo la distribuzione di un’app Angular usando il comando ng build viene caricato anche un file chiamato polyfills.js

Negli ultimi anni, i browser hanno iniziato a implementare molte di queste nuove funzionalità. La probabilità che ad un utente che sta navigando con l’ultima versione di Chrome, ad esempio, non serviranno a nulla i polyfill ES2015 contenuti nel file detto prima. Il loro browser li supporta già nativamente. Questo rende la maggior parte dei contenuti del file polyfills.js obsoleti e non più necessari.

Per questo, iniziando dalla versione della Angular CLI 7.3.0, è stato introdotto il caricamento condizionale dei polyfill! Quindi, già nel normale processo di build, la CLI creerà due bundle di polyfill: polyfills.js e es2015-polyfills.js. Il primo include solo i polyfill richiesti dai browser più aggiornati, e che quindi supportano ES2015 nativamente. Mentre, il secondo file contiene tutti i polyfills inclusi nel file precendente con l’aggiunta di quelli che servono ai browser più datati (funzionalità come Map, Set, ecc.).

Alla fine della build il tuo file index.html dovrebbe assomigliare a questo:

<body>
  <app-root></app-root>
  <script type="text/javascript" src="runtime.***.js"></script>
  <script type="text/javascript" src="es2015-polyfills.***.js" nomodule></script>
  <script type="text/javascript" src="polyfills.***.js"></script>
  <script type="text/javascript" src="main.***.js"></script>
</body>

Nello snippet riportato sopra, puoi vedere che la CLI di Angular ha aggiunto l’attributo nomodule al tag del polyfill ES2015. Questo attributo permette di far capire ai browser di scaricare ed eseguire lo script solo se il browser non riconosce l’API del module script web, questo significa che il browser è vecchio. 👌

E se i miei utenti non usano browser datati? 🤯

Potresti chiederti: e se i miei utenti non usano browser datati? è una domanda legittima, perché dovresti aspettare che la CLI faccia la build anche dei polyfill datati che non verranno mai usati? Se stai pensando davvero a questo, sei uno sviluppatore felice! 😁 Se vuoi ignorare i vecchi polyfill completamente, puoi farlo usando il comando:

ng build --es5BrowserSupport=false

Settando l’opzione --es5BrowserSupport a false, la CLI di Angular produrrà solo il file polyfills.js che contiene solo le funzionalità più recenti, ma la tua app non funzionerà più molto bene sui browser più vecchi.

Se non vuoi settare la nuova opzione tutte le volte che usi il comando build, puoi modificare direttamente il file angular.json:

"projects": {
    "project-name": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "es5BrowserSupport": false,

Questo piccolo trucchetto ti permetterà di evitare l’esecuzione di circa 60Kb di Javascript 😎


Do you want to be updated when new articles are being published?

Join the newsletter! 😎

Michele Da Rin Fioretto
Written by Michele Da Rin Fioretto a freelance web developer that works in Italy and in the world.
His main area of expertise are Angular, React, Firebase & Serverless Architectures
You can also find him on
Michele Da Rin Fioretto Facebook link
Michele Da Rin Fioretto LinkedIn link
Michele Da Rin Fioretto Github link
Michele Da Rin Fioretto Instagram link
Michele Da Rin Fioretto Twitter link