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

Houssein Djirdeh

Creare siti web che funzionino su tutti i principali browser è un principio fondamentale un ecosistema web aperto. Tuttavia, ciò comporta un ulteriore lavoro per garantire che tutti il codice che scrivi sia supportato in tutti i browser che prevedi di scegliere come target. Se vuoi usare nuove funzionalità del linguaggio JavaScript, devi a formati compatibili con le versioni precedenti per i browser che non supportano ancora che li rappresentano.

Babel è lo strumento più utilizzato per compilare il codice che contiene una nuova sintassi nel codice che i diversi browser e ambienti (come Nodo) possano comprendere. Questa guida presuppone che tu stia utilizzando Babel, quindi segui le istruzioni di configurazione per includilo nella tua applicazione, se non l'hai già fatto. Seleziona webpack in Build Systems se usi webpack come bundler di moduli nella tua app.

Per utilizzare Babel per eseguire il transpile solo di ciò che è necessario per gli utenti, devi:

  1. Identifica i browser che vuoi scegliere come target.
  2. Utilizza @babel/preset-env con i target del browser appropriati.
  3. Utilizza <script type="module"> per interrompere l'invio del codice trasferito ai browser che non ne hanno bisogno.

Identificare i browser da scegliere come target

Prima di iniziare a modificare il modo in cui viene eseguito il transpile del codice nella tua applicazione, devi identificare i browser che accedono alla tua applicazione. Analizzare i browser attualmente utilizzati dai tuoi utenti e da quelli che intendi scegliere come target per decisione informata.

Utilizza @babel/preset-env

La transcodifica del codice di solito comporta la creazione di un file di dimensioni maggiori rispetto a nelle loro forme originali. Riducendo al minimo la quantità di compilation è possibile ridurre le dimensioni dei pacchetti per migliorare le prestazioni di una pagina web.

Anziché includere plug-in specifici per compilare selettivamente determinati linguaggi le funzionalità che state usando, Babel fornisce una serie di preimpostazioni che raggruppano i plug-in in sinergia. Utilizza @babel/preset-env per includere solo le trasformazioni e i polyfill necessari per i browser che prevedi targeting.

Includi @babel/preset-env all'interno dell'array presets nella tua Babel di configurazione, .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 l'elenco dei browser, una configurazione open source condivisa tra diverse per il targeting dei browser. Un elenco completo delle query compatibili è disponibile nella documentazione dei browser. 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 sono necessari per supportare i browser che costituiscono oltre lo 0,25% all'utilizzo delle risorse. Ciò garantisce che il bundle non contenga elementi di cui è stato eseguito il transpile non necessario per i browser utilizzati da una percentuale molto ridotta di utenti.

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

  "targets": "last 2 versions"

Il valore "last 2 versions" trasversa il codice per il campo ultime due versioni di ogni browser, il che significa che è previsto il supporto per i browser non più in uso, come Internet Explorer. Le dimensioni del set potrebbero aumentare inutilmente, se non ti aspetti questi browser da utilizzare per accedere alla tua applicazione.

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

Abilita correzioni di bug moderne

@babel/preset-env raggruppa più funzionalità di sintassi JavaScript in raccolte e attiva/disattiva in base ai browser di destinazione specificati. Sebbene funzioni bene, un'intera raccolta di le funzionalità di sintassi vengono trasformate quando un browser target contiene un bug con una sola funzionalità. Questo spesso comporta una trasformazione del codice più grande del necessario.

Sviluppato in origine come preimpostazione separata, opzione di correzione di bug in @babel/preset-env risolve il problema convertendo la sintassi moderna che non funziona in alcuni browser nella una sintassi equivalente che non viene interrotta in questi browser. Il risultato è un codice moderno quasi identico piccole modifiche di sintassi che garantiscono la compatibilità in tutti i browser di destinazione. Per usare questa per l'ottimizzazione, assicurati di avere installato @babel/preset-env 7.10 o versioni successive, quindi imposta proprietà bugfixes a true:

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

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

Utilizza <script type="module">

I moduli JavaScript, o moduli ES, sono una funzionalità relativamente nuova supportata tutti i principali browser. Puoi usare i moduli per creare script che possano essere importati ed esportati da altri moduli, ma puoi usali anche con @babel/preset-env per scegliere come target solo i browser che supportano che li rappresentano.

Invece di chiedere specifiche versioni o quote di mercato del browser, prendi in considerazione specificando "esmodules" : true all'interno del campo targets del file .babelrc.

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

Molte funzionalità ECMAScript più recenti compilate con Babel sono già supportate in ambienti che supportano i moduli JavaScript. Così facendo, semplificare il processo per garantire che venga utilizzato solo il codice trasferito 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 di script con type="module". Ciò significa che puoi includere un modulo e un fallback compilato.

Idealmente, i due script di versione di un'applicazione sono inclusi nel seguente modo:

  <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.

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

  • Una versione solo per i browser che supportano i moduli.
  • Una versione che include uno script compilato che funziona con qualsiasi browser precedente. Questo file ha dimensioni maggiori, poiché la traspilazione deve supportare una gamma più ampia di browser.
di Gemini Advanced.

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