Comprendre le tremblement d'arbre en JavaScript : un guide rapide

À mesure que les applications Web modernes gagnent en complexité, la nécessité d'optimiser leurs performances augmente également. Une technique puissante qui a gagné en popularité ces dernières années est le secouage des arbres. Si vous avez entendu le terme mais que vous n’êtes pas sûr de ce qu’il signifie ni de son fonctionnement, cet article est fait pour vous.

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

Le tremblement d'arbre est une forme d'élimination de code mort. Il s'agit d'une technique utilisée par les bundlers JavaScript (comme Webpack ou Rollup) pour supprimer le code qui n'est pas réellement utilisé (c'est-à-dire le code mort) de votre bundle final. Pensez à secouer un arbre et à faire tomber des feuilles mortes. C'est précisément ce qui se passe, sauf que nous supprimons les morceaux de code inutilisés pour rendre notre application simple et rapide !

Comment fonctionne le tremblement des arbres ?

Tree Shaking s'appuie sur les modules ES6, qui utilisent des instructions d'importation et d'exportation. Contrairement à CommonJS, qui charge des modules entiers même si vous n'en utilisez qu'une petite partie, les modules ES6 permettent une analyse statique du code. Cela signifie que les bundlers peuvent déterminer quelles parties de votre code sont réellement utilisées et lesquelles ne le sont pas. Consultez ceci pour en savoir plus sur la différence entre les deux.

Voici un exemple :

// math.js
export function add(a, b) {
  return a + b;
}

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

// main.js
import { add } from './math.js';

console.log(add(2, 3)); // Output: 5

Dans ce cas, si le tremblement d'arbre est activé, la fonction de multiplication de math.js sera supprimée du bundle final car elle n'est jamais utilisée. Cela conduit à des temps de chargement plus rapides et à de meilleures performances en réduisant la taille du bundle.

Il s'agit d'un petit exemple, mais sur un gros projet lors de l'importation de plusieurs gros bundles JavaScript, les temps de chargement deviennent quelque chose auquel vous devez penser, car de mauvais temps de chargement conduisent à une expérience utilisateur négative, en particulier lorsqu'il s'agit d'utilisateurs sur un réseau plus lent. ou un appareil. Tout le monde ne possède pas le dernier MacBook Pro !

Comment activer le tremblement des arbres

Heureusement pour nous, il existe des bundles qui prennent en charge le tremblement d'arbre dès la sortie de la boîte... en regardant Webpack et Rollup (clin d'œil, clin d'œil). Assurez-vous simplement que votre code est écrit dans les modules ES6.

Limites du tremblement des arbres

Nous avons maintenant expliqué à quel point c'est incroyable, mais il y a quelques limites, à savoir :

• Effets secondaires : si un module ou ses importations ont des effets secondaires (par exemple, la modification d'une variable globale), le tremblement de l'arbre peut ne pas le supprimer, même si le code n'est pas directement utilisé. Vous pouvez contrecarrer cela en marquant les modules comme « sans effets secondaires » dans votre package.json.
• Modules non ES6 : l'arborescence ne fonctionne qu'avec les modules ES6, donc si votre projet utilise CommonJS ou un autre système de modules, cela ne fonctionnera pas.

Conclusion

Le tremblement d'arbre est une technique d'optimisation essentielle qui permet de réduire la taille de vos bundles JavaScript en éliminant le code inutilisé. Assurez-vous que vous utilisez des modules ES6 et un bundle tel que Webpack ou Rollup et vous bénéficierez automatiquement du tremblement d'arborescence, ce qui entraînera des temps de chargement plus rapides et une meilleure expérience utilisateur. Commentez ci-dessous si vous avez des questions !

Si vous avez apprécié cet article, pensez à vous abonner à ma newsletter pour plus de conseils sur JavaScript, le développement Web et bien plus encore !

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!