Pubblica codice moderno per i browser moderni per caricare più velocemente le pagine

Houssein Djirdeh

La creazione di siti web che funzionino bene su tutti i principali browser è un principio fondamentale di un ecosistema web aperto. Tuttavia, questo comporta un lavoro aggiuntivo per assicurarti che tutto il codice scritto sia supportato in ogni browser che prevedi di scegliere come target. Se vuoi utilizzare le nuove funzionalità del linguaggio JavaScript, devi transpilare queste funzionalità in formati compatibili con le versioni precedenti per i browser che non le supportano ancora.

Babel è lo strumento più utilizzato per compilare il codice che contiene una sintassi più recente in codice che browser e ambienti diversi (come Node) possono comprendere. Questa guida presuppone che tu stia utilizzando Babel, quindi devi seguire le istruzioni di configurazione per includerlo nella tua applicazione, se non l'hai ancora fatto. Seleziona webpack in Build Systems se utilizzi webpack come bundler dei moduli nella tua app.

Nota: curiosità: Lebab è una libreria separata che fa l'opposto di Babel. Converte il codice precedente in una sintassi più recente.

Per utilizzare Babel per transpilare solo ciò che è necessario per i tuoi utenti, devi:

1. Identifica i browser da scegliere come target.
2. Utilizza @babel/preset-env con target del browser appropriati.
3. Utilizza <script type="module"> per interrompere l'invio di codice transpiled ai browser che non lo richiedono.

Identifica i browser da scegliere come target

Prima di iniziare a modificare il modo in cui il codice della tua applicazione viene transpiled, devi identificare i browser che accedono alla tua applicazione. Analizza i browser attualmente in uso dagli utenti e quelli che prevedi di scegliere come target per prendere una decisione consapevole.

Utilizza @babel/preset-env

La transpilazione del codice in genere genera un file di dimensioni maggiori rispetto alle forme originali. Riducendo al minimo la quantità di compilazione, puoi ridurre le dimensioni dei bundle per migliorare le prestazioni di una pagina web.

Anziché includere plug-in specifici per compilare in modo selettivo determinate funzionalità linguistiche in uso, Babel fornisce una serie di preset che raggruppano i plug-in. Utilizza @babel/preset-env per includere solo le trasformazioni e i polyfill necessari per i browser che intendi scegliere come target.

Includi @babel/preset-env nell'array presets nel file di configurazioni di Babel, .babelrc:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "targets": ">0.25%"
     }
   ]
 ]
}

Utilizza il campo targets per specificare le versioni del browser da includere aggiungendo una query appropriata al campo browsers. @babel/preset-env si integra con browserslist, una configurazione open source condivisa tra diversi strumenti per il targeting dei browser. Un elenco completo delle query compatibili è disponibile nella documentazione di browserslist. Un'altra opzione è utilizzare un file .browserslistrc per elencare gli ambienti che vuoi scegliere come target.

Il valore ">0.25%" indica a Babel di includere solo le trasformazioni necessarie per supportare i browser che rappresentano più dello 0,25% dell'utilizzo mondiale. In questo modo, il bundle non contiene codice transpiled non necessario per i browser utilizzati da una percentuale molto ridotta di utenti.

Nella maggior parte dei casi, questo approccio è migliore rispetto all'utilizzo della seguente configurazione:

  "targets": "last 2 versions"

Il valore "last 2 versions" transpila il codice per le ultime due versioni di ogni browser, il che significa che viene fornito il supporto per i browser non più in produzione come Internet Explorer. Ciò può aumentare inutilmente le dimensioni del bundle se non prevedi che questi browser vengano utilizzati per accedere alla tua applicazione.

In definitiva, devi selezionare la combinazione appropriata di query per scegliere come target solo i browser adatti alle tue esigenze.

Attivare correzioni di bug moderne

@babel/preset-env raggruppa più funzionalità di sintassi JavaScript in raccolte e le attiva/disattiva in base ai browser di destinazione specificati. Sebbene funzioni bene, un'intera raccolta di funzionalità di sintassi viene trasformata quando un browser di destinazione contiene un bug relativo a una singola funzionalità. Ciò spesso comporta un codice trasformato più del necessario.

Sviluppata originariamente come preset separato, l'opzione di correzione dei bug in @babel/preset-env risolve questo problema convertendo la sintassi moderna non funzionante in alcuni browser nella sintassi equivalente più vicina che non presenta problemi in questi browser. Il risultato è un codice moderno quasi identico con alcuni piccoli aggiustamenti sintattici che garantiscono la compatibilità in tutti i browser di destinazione. Per utilizzare questa ottimizzazione, assicurati di aver installato @babel/preset-env 7.10 o versioni successive, quindi imposta la proprietà bugfixes su true:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "bugfixes": true
     }
   ]
 ]
}

In Babel 8, l'opzione bugfixes sarà attiva per impostazione predefinita.

Utilizza <script type="module">

I moduli JavaScript, o moduli ES, sono una funzionalità relativamente nuova supportata in tutti i principali browser. Puoi utilizzare i moduli per creare script che possono importare ed esportare da altri moduli, ma puoi anche utilizzarli con @babel/preset-env per scegliere come target solo i browser che li supportano.

Anziché eseguire query per versioni del browser o quote di mercato specifiche, ti consigliamo di specificare "esmodules" : true all'interno del campo targets del file .babelrc.

{
   "presets":[
      [
         "@babel/preset-env",
         {
            "targets":{
               "esmodules": true
            }
         }
      ]
   ]
}

Molte delle funzionalità ECMAScript più recenti compilate con Babel sono già supportate in ambienti che supportano i moduli JavaScript. In questo modo, semplifichi il processo di verifica che venga utilizzato solo il codice transpiled per i browser che ne hanno effettivamente bisogno.

I browser che supportano i moduli ignorano gli script con un attributo nomodule. Al contrario, i browser che non supportano i moduli ignorano gli elementi script contype="module". Ciò significa che puoi includere un modulo e un elemento di riserva compilato.

Idealmente, gli script delle due versioni di un'applicazione sono inclusi come segue:

  <script type="module" src="main.mjs"></script>
  <script nomodule src="compiled.js" defer></script>

I browser che supportano i moduli recuperano ed eseguono main.mjs e ignorano compiled.js. I browser che non supportano i moduli fanno il contrario.

Nota: gli script dei moduli sono differiti per impostazione predefinita. L'attributo defer viene aggiunto allo script nomodule per lo stesso comportamento.

Se utilizzi webpack, puoi impostare target diversi nelle configurazioni per due versioni separate dell'applicazione:

• Una versione solo per i browser che supportano i moduli.
• Una versione che include uno script compilato che funziona in qualsiasi browser precedente. Il file risultante ha dimensioni maggiori, poiché la transpilazione deve supportare una gamma più ampia di browser.

Nota: anche se questo approccio HTML può offrire vantaggi in termini di prestazioni, è stato riscontrato che alcuni browser eseguono il recupero doppio quando specificano sia gli script module che nomodule. L'articolo di Jason Miller Caricamento di script moderni spiega questo problema in modo più dettagliato e illustra alcune opzioni che possono essere utilizzate per aggirarlo.

Grazie a Connor Clark e Jason Miller per le loro recensioni.