Qu’est-ce que le tremblement d’arbre en JavaScript ?

Qu'est-ce que le tremblement d'arbre ?

Si vous êtes un développeur JavaScript expérimenté, vous avez peut-être entendu parler de Tree Shaking. La suppression du code inutilisé d'une application est une technique courante, et elle supprime également les importations inutilisées de l'application. Ici, le terme « secouement d'arbre » a été introduit en secouant l'arbre, en supprimant les branches de code inutiles et en conservant le code requis dans le package final.

Fondamentalement, le tramage d'arborescence est utilisé pour éliminer le code invalide ou inutilisé.

Pourquoi avons-nous besoin du Tree Shaking ?

Comme nous l'avons vu dans la partie ci-dessus du tutoriel, l'arborescence est utilisée pour supprimer le code inutilisé du package d'application. La principale raison d'utiliser Tree Shaking est de réduire la taille du package JavaScript que nous fournissons au navigateur de l'utilisateur. Si la taille du package est plus petite, il se chargera plus rapidement sur le navigateur. De plus, moins de données sont nécessaires pour télécharger le bundle dans un navigateur Web, ce qui améliore les performances de l'application.

En particulier, la technologie d'arborescence est très importante dans le développement Web lors du développement de sites Web qui s'appuient sur des données dynamiques volumineuses. Si votre application Web est très volumineuse mais contient des pages Web statiques, vous n'avez pas besoin de l'arborescence, mais même si votre application est petite et charge beaucoup de données dynamiques, vous aurez besoin de l'arborescence pour supprimer le code supplémentaire.

Comment fonctionne le Tree Shaking ?

Dans cette section, nous apprendrons comment fonctionne Tree Shaking dans le développement en temps réel.

Comprenons le tremblement d'arbre avec un exemple de base.

Ici, nous avons créé trois fichiers différents et ajouté différentes fonctions JavaScript aux fichiers en fonction des noms de fichiers.

Nom du fichier – sum.js

export function sum() {
   let array = [1, 2, 3, 4, 5];
   return array.reduce((a, b) => a + b, 0);
}

Nom du fichier – Factorial.js

export function factorial(n) {
   if (n === 0) {
      return 1;
   }
   return n * factorial(n - 1);
}

Nom du fichier-multiply.js

export function multiply(a, b) {
   return a * b;
}

Nom du fichier – index.js

import { sum } from './sum.js';
import { factorial } from './factorial.js';
import { multiply } from './multiply.js';
console.log(sum(2, 3));

Dans l'exemple ci-dessus, nous avons exporté les fonctions de somme, factorielle et de multiplication à partir de différents fichiers. Après cela, nous avons importé les trois fonctions dans le fichier index.js. Ici, nous n'avons utilisé que la fonction sum() mais pas les fonctions Factorial() ou multiplie(). Par conséquent, nous avons une importation inutilisée dans le fichier index.js et nous devons la supprimer.

Dans ES5, nous utilisons « require() » pour importer des fonctions ou des modules à partir de n'importe quel autre fichier JavaScript. Par conséquent, nous pouvons importer des modules sous condition comme indiqué ci-dessous.

let isSumRequire = true;
var sum;
var multiply;
if (isSumRequire) {
   sum = require('./sum');
} else {
   multiply = require('./multiply');
}

Ici, en fonction de la condition, nous importons le module afin qu'il soit chargé selon les exigences.

Mais dans ES6, nous ne pouvons pas importer de modules sous condition comme indiqué ci-dessous.

let isSumRequire = true;
if (isSumRequire) {
   import sum from './sum';
} else {
   import multiply from './multiply';
}

Le code d'importation conditionnelle ci-dessus ne fonctionne pas. Par conséquent, nous devons utiliser un bundler JavaScript.

Comment utiliser les bundlers pour secouer les arbres ?

Comme nous l'avons vu dans la section ci-dessus, dans ES6, nous ne pouvons pas utiliser d'importations conditionnelles. Par conséquent, nous devons utiliser des packagers tels que webpack, Rollup, parcel, etc.

Tout d’abord, nous devons configurer le bundler pour le tremblement des arbres. Cela implique de définir le mode sur « Production » et d'ajouter des paramètres d'optimisation pour permettre le tremblement des arbres.

Par exemple, dans webpack, vous pouvez utiliser le code suivant.

module.exports = {
   mode: 'production',
   optimization: {
      usedExports: true,
   },
   // other configuration settings...
};

Après cela, les utilisateurs doivent importer le module selon le format ES6 et doivent s'assurer que la méthode « require() » n'est pas utilisée pour l'importation.

De cette manière, les développeurs peuvent activer l'arborescence en JavaScript à l'aide de bundlers, ce qui contribue à améliorer les performances des applications en réduisant les temps de chargement sur les navigateurs Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!