Intégrez un code moderne dans les navigateurs récents pour accélérer le chargement des pages.

Houssein Djirdeh

Créer des sites Web qui fonctionnent bien sur tous les principaux navigateurs est un principe fondamental d'un écosystème Web ouvert. Toutefois, cela implique un travail supplémentaire pour vous assurer que tout le code que vous écrivez est compatible avec chaque navigateur que vous prévoyez de cibler. Si vous souhaitez utiliser de nouvelles fonctionnalités de langage JavaScript, vous devez les transcompiler en formats rétrocompatibles pour les navigateurs qui ne les prennent pas encore en charge.

Babel est l'outil le plus utilisé pour compiler du code contenant une syntaxe plus récente en code que différents navigateurs et environnements (tels que Node) peuvent comprendre. Ce guide suppose que vous utilisez Babel. Vous devez donc suivre les instructions de configuration pour l'inclure dans votre application si vous ne l'avez pas déjà fait. Sélectionnez webpack dans Build Systems si vous utilisez webpack comme outil de regroupement de modules dans votre application.

Pour utiliser Babel afin de ne transcompiler que ce qui est nécessaire à vos utilisateurs, vous devez:

  1. Identifiez les navigateurs que vous souhaitez cibler.
  2. Utilisez @babel/preset-env avec les cibles de navigateur appropriées.
  3. Utilisez <script type="module"> pour arrêter d'envoyer du code transcompilé aux navigateurs qui n'en ont pas besoin.

Identifier les navigateurs que vous souhaitez cibler

Avant de commencer à modifier la façon dont le code de votre application est transcompilé, vous devez identifier les navigateurs qui y accèdent. Analysez les navigateurs que vos utilisateurs utilisent actuellement, ainsi que ceux que vous prévoyez de cibler pour prendre une décision éclairée.

Utiliser @babel/preset-env

La transcompilation de code génère généralement un fichier plus volumineux que ses formes d'origine. En réduisant la quantité de compilation, vous pouvez réduire la taille de vos bundles pour améliorer les performances d'une page Web.

Au lieu d'inclure des plug-ins spécifiques pour compiler sélectivement certaines fonctionnalités linguistiques que vous utilisez, Babel fournit un certain nombre de préréglages qui regroupent des plug-ins. Utilisez @babel/preset-env pour n'inclure que les transformations et les polyfills nécessaires aux navigateurs que vous prévoyez de cibler.

Incluez @babel/preset-env dans le tableau presets de votre fichier de configuration Babel, .babelrc:

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

Utilisez le champ targets pour spécifier les versions de navigateur que vous souhaitez inclure en ajoutant une requête appropriée au champ browsers. @babel/preset-env s'intègre à browserslist, une configuration Open Source partagée entre différents outils pour cibler les navigateurs. Vous trouverez la liste complète des requêtes compatibles dans la documentation browserslist. Vous pouvez également utiliser un fichier .browserslistrc pour lister les environnements que vous souhaitez cibler.

La valeur ">0.25%" indique à Babel de n'inclure que les transformations nécessaires pour prendre en charge les navigateurs qui représentent plus de 0,25% de l'utilisation mondiale. Cela garantit que votre bundle ne contient pas de code transpilé inutile pour les navigateurs utilisés par un très faible pourcentage d'utilisateurs.

Dans la plupart des cas, cette approche est préférable à l'utilisation de la configuration suivante:

  "targets": "last 2 versions"

La valeur "last 2 versions" transpile votre code pour les deux dernières versions de chaque navigateur, ce qui signifie que les navigateurs abandonnés tels qu'Internet Explorer sont pris en charge. Cela peut augmenter inutilement la taille de votre bundle si vous ne prévoyez pas que ces navigateurs seront utilisés pour accéder à votre application.

En définitive, vous devez sélectionner la combinaison de requêtes appropriée pour ne cibler que les navigateurs qui répondent à vos besoins.

Activer les corrections de bugs modernes

@babel/preset-env regroupe plusieurs fonctionnalités de syntaxe JavaScript dans des collections et les active/désactive en fonction des navigateurs cibles spécifiés. Bien que cela fonctionne bien, une collection complète de fonctionnalités de syntaxe est transformée lorsqu'un navigateur ciblé contient un bug avec une seule fonctionnalité. Cela entraîne souvent plus de code transformé que nécessaire.

Initialement développée en tant que préréglage distinct, l'option de correction de bugs dans @babel/preset-env résout ce problème en convertissant la syntaxe moderne qui ne fonctionne pas dans certains navigateurs en syntaxe équivalente la plus proche qui fonctionne dans ces navigateurs. Le résultat est un code moderne presque identique, avec quelques petits ajustements de syntaxe qui garantissent la compatibilité dans tous les navigateurs cibles. Pour utiliser cette optimisation, assurez-vous d'avoir installé @babel/preset-env 7.10 ou une version ultérieure, puis définissez la propriété bugfixes sur true:

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

Dans Babel 8, l'option bugfixes est activée par défaut.

Utiliser <script type="module">

Les modules JavaScript, ou modules ES, sont une fonctionnalité relativement récente compatible avec tous les principaux navigateurs. Vous pouvez utiliser des modules pour créer des scripts pouvant importer et exporter à partir d'autres modules, mais vous pouvez également les utiliser avec @babel/preset-env pour ne cibler que les navigateurs compatibles.

Au lieu d'interroger des versions de navigateur ou des parts de marché spécifiques, envisagez de spécifier "esmodules" : true dans le champ targets de votre fichier .babelrc.

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

De nombreuses fonctionnalités ECMAScript plus récentes compilées avec Babel sont déjà compatibles avec les environnements compatibles avec les modules JavaScript. Vous simplifiez ainsi le processus de vérification que seul le code transcompilé est utilisé pour les navigateurs qui en ont réellement besoin.

Les navigateurs compatibles avec les modules ignorent les scripts avec un attribut nomodule. À l'inverse, les navigateurs qui ne sont pas compatibles avec les modules ignorent les éléments de script avec type="module". Vous pouvez donc inclure un module ainsi qu'un remplacement compilé.

Idéalement, les deux scripts de version d'une application sont inclus comme suit:

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

Les navigateurs compatibles avec les modules récupèrent et exécutent main.mjs, et ignorent compiled.js. Les navigateurs qui ne sont pas compatibles avec les modules font l'inverse.

Si vous utilisez webpack, vous pouvez définir différentes cibles dans vos configurations pour deux versions distinctes de votre application:

  • Version réservée aux navigateurs compatibles avec les modules.
  • Version qui inclut un script compilé qui fonctionne dans n'importe quel ancien navigateur. La taille de fichier est plus importante, car la transcompilation doit être compatible avec un plus grand nombre de navigateurs.

Merci à Connor Clark et Jason Miller pour leurs avis.