Le shaking d'arbre est une technique d'élimination du code mort qui supprime le code inutilisé des faisceaux JavaScript, entra?nant des tailles de fichiers plus petites et des performances améliorées. Il fonctionne en tirant parti de la structure statique des modules ES6 (import / export), permettant aux bundlers comme WebPack, Rollup ou Vite d'analyser les dépendances au moment de la construction et d'éliminer le code inutile. 1. Le tremblement d'arbre ne fonctionne qu'avec des modules ES6, et non des communjs (besoin ()), car les importations dynamiques empêchent l'analyse statique. 2. Il est distinct de la minification, qui réduit la taille du code en renommant les variables et en supprimant l'espace mais ne supprime pas les fonctions ou les modules inutilisés. 3. Pour permettre des tremblements d'arbre efficaces, utilisez la syntaxe ES6 de manière cohérente, préférez les bibliothèques qui fournissent des versions de module ES (par exemple, Lodash-ES), évitez d'importer des objets par défaut entiers lorsqu'une seule fonction est nécessaire et assurez-vous que votre bundler est réglé en mode de production. 4. Configurez correctement le champ "SideEffects" dans package.json pour indiquer quels fichiers ont des effets secondaires (comme les polyfills ou les importations CSS), permettant la suppression plus s?re du code inutilisé. 5. Vérifiez toujours l'efficacité des tremblements d'arbre à l'aide d'outils comme Bundlephobia.com, WebPack Bundle Analyzer ou Source-Map-Explorer, car de nombreuses bibliothèques ne prennent pas en charge les tremblements d'arbre en raison de formats non ESM ou d'effets secondaires inhérents. Le tremblement d'arbre n'est pas automatique et nécessite une configuration correcte, mais lorsqu'il est correctement configuré, il fonctionne de manière transparente pour réduire la charge utile JavaScript sans modifier la logique d'application.

Le tremblement d'arbre est un terme que vous avez probablement entendu si vous travaillez avec des outils de construction JavaScript modernes. à la base, le tremblement d'arbre est une méthode d'élimination du code mort - les parties de votre faisceau JavaScript qui sont importées mais jamais réellement utilisées. Le but? Tailles de faisceaux plus petites, temps de chargement plus rapides et meilleures performances.

Ce n'est pas magique, et cela ne fonctionne pas automatiquement dans tous les scénarios. Pour vraiment bénéficier de tremblements d'arbres, vous devez comprendre comment cela fonctionne et quelles conditions doivent être remplies pour qu'elle soit efficace.

Ce que la tremblement d'arbre est réellement (et n'est pas)

Le tremblement d'arbre est une technique d'élimination du code mort utilisée pendant le processus de construction, principalement par des bundlers comme WebPack, Rollup ou Vite. Le nom vient de l'idée de ?trembler? un arbre (votre base de code) afin que les branches mortes et inutilisées tombent.

Il fonctionne en raison de la syntaxe du module ES6 ( import / export ). Contrairement à CommonJS ( require() ), les importations ES6 sont statiques - ce qui signifie que les importations et les exportations peuvent être analysées au moment de la construction sans exécuter le code. Cette structure statique permet aux bundlers de déterminer quelles parties d'un module sont réellement utilisées.

IMPORTANT: Les tremblements d'arbres ne sont pas les mêmes que la minification. La minification raccourcit les noms de variables et supprime les espaces blancs. Le tremblement d'arbre supprime des morceaux entiers de code inutilisé.

Par exemple:

 // utils.js
Exporter const Add = (a, b) => ab;
Export Const soustraire = (a, b) => a - b;

// main.js
import {add} de './utils.js';
console.log (Add (2, 3));

Dans ce cas, subtract n'est jamais importée ou utilisée. Avec les tremblements d'arbre activés, il ne sera pas inclus dans le paquet final.

Comment les tremblements d'arbres fonctionnent sous le capot

Le processus implique quelques étapes clés:

• Analyse statique : le bundler scanne votre code pour cartographier toutes les instructions import et export .
• Batiment du graphique de dépendance : il crée un graphique dont les modules dépendent de laquelle.
• Marque et balayage : il marque toutes les fonctions, variables ou modules utilisées, puis ?secoue? celles non marquées (inutilisées).

Mais voici le Catch: Tree Shaking ne fonctionne que si votre code et vos dépendances utilisent des modules ES6 . Si une bibliothèque utilise CommonJS ( module.exports , require() ), le bundler ne peut pas l'analyser statiquement, donc le tremblement d'arbre échoue.

Par exemple, si vous importez à partir d'un module CommonJS:

 // cjs-module.js
module.exports = {
  Ajouter: (a, b) => ab,
  soustrait: (a, b) => a - b
};

// main.js
const {add} = require ('./ cjs-module');

Même si vous n'utilisez add , les deux fonctions peuvent se retrouver dans le faisceau car require() est dynamique.

Faire du tremblement d'arbres pour vous

Pour tirer le meilleur parti des tremblements d'arbres, suivez ces meilleures pratiques:

• ? Utiliser la syntaxe du module ES6 cohérente ( import / export )

• ? Choisissez des bibliothèques qui publient des versions de module ES6 (recherchez module ou le champ exports dans package.json )

• ? évitez les importations par défaut lorsque vous n'avez besoin que d'une seule fonction:

   // éviter
  import _ de ?lodash?;
  console.log (_. CLAMP (-5, 0, 10));
  
  // préfère (si pris en charge)
  import {clamp} de 'lodash-es';

• ? Activer le mode de production dans votre bundler (WebPack, par exemple, applique que complètement le tremblement d'arbre en mode: 'production' )

• ? Utilisez des outils comme Balldlephobia.com pour vérifier si un package prend en charge les tremblements d'arbre

Sachez également que les effets secondaires peuvent bloquer les tremblements d'arbres. Si un fichier effectue des actions simplement en étant importés (par exemple, polyfills, importations CSS ou code avec des effets secondaires), le bundler peut le garder même si rien n'est exporté.

Vous pouvez signaler à WebPack quels fichiers n'ont aucun effet secondaire:

 // package.json
{
  "Side effet": faux
}

Ou énumérez des fichiers spécifiques qui ont des effets secondaires:

 "Side effet": [
  "./src/polyfills.js",
  "* .css"
]]

Cela aide le bundler à éliminer en toute sécurité les modules inutilisés.

Pièges et idées fausses courantes

• "Le simple fait d'importer une fonction signifie seulement que la fonction est regroupée."
  Pas vrai si la bibliothèque n'utilise pas de modules ES ou si vous utilisez le mauvais chemin d'importation (par exemple, l'importation de lodash au lieu de lodash-es ).

• "Les tremblements d'arbres agissent à 100% de la bo?te."
  Cela dépend de votre configuration d'outillage, de vos choix de bibliothèques et de vos modèles de codage. Vérifiez toujours avec un analyseur de bundle.

• "Il supprime le code inutilisé de toutes les bibliothèques."
  Seulement si ces bibliothèques sont rédigées avec des tremblements d'arbre à l'esprit. De nombreux packages plus anciens ou mal structurés regroupent toujours tout.

Utilisez des outils comme WebPack Bundle Analyzer ou Source-Map-Explorer pour visualiser votre bundle et confirmer que le code inutilisé est réellement supprimé.

Le tremblement d'arbre est une puissante optimisation, mais elle n'est aussi efficace que votre configuration le permet. Utilisez des modules ES, choisissez les bonnes bibliothèques, marquez correctement les effets secondaires et validez toujours votre composition de bundle. Avec la bonne approche, vous pouvez réduire considérablement la charge utile JavaScript - sans modifier une seule ligne de logique métier.

Fondamentalement, ce n'est pas automatique, mais une fois configuré, il s'exécute silencieusement et vous sauve (et vos utilisateurs) octets à chaque fois.

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!