Principes de base de la secousse pour les applications React

L'arborescence est un moyen important de réduire la taille de votre groupe et d'améliorer les performances. Voyez comment vous pouvez le faire dans vos applications React.

L'arborescence est un concept du développement en front-end qui implique l'élimination du code mort ou du code inutilisé. Cela dépend de la syntaxe statique des modules d'importation et d'exportation dans ES6 (ES2015). En prenant en compte les concepts d'arborescence lors de l'écriture de code, nous pouvons considérablement réduire la taille de la liasse en éliminant le JavaScript inutilisé, optimisant ainsi l'application et en améliorant ses performances.

Ébranlement avec des modules JavaScript (modules CommonJS et ES6) Modules)

La création d'arborescences est devenue très populaire dans le développement Web moderne en raison de l'essor des instructions d'importation et d'exportation ES6, qui facilitent l'analyse statique des fichiers JavaScript. Cela signifie que, lors de la compilation, le compilateur peut déterminer les importations et les exportations et décider par programme du code à exécuter, contrairement aux modules Common JS et AMD, analysés de manière dynamique. Vous trouverez ci-dessous des exemples d'importations ES6 et d'importations CommonJS, dans lesquels la taille de l'ensemble d'importations ES6 est considérablement réduite, par opposition à l'utilisation de modules CommonJS pour l'importation de packages.

 // Exemple d'importation CommonJS d'un package. L'ensemble est importé 
 const  lodash  =   require  ( "lodash" ) ;   70.7  K  . ( gzipped :   24 .  7k ) 


 // ES2015 (ES6) Exemple d'importation d'une dépendance spécifique avec un secouage d'arbre 
 import . isArray  de   de 'lodash / isArray'   1  K   ( gzipped :   505 ) 

Prise de vue plus en profondeur Regardez l'exemple ci-dessus, CommonJS Modules ne prend pas en charge le tremblement d'arbre car il est analysé de manière dynamique. Cependant, les avantages de la secousse des arbres sont clairs. En utilisant la technique ES6 d'importation de dépendances, comme le paquetage lodash, la taille de la dépendance est relativement importante. D'un autre côté, l'utilisation de la technique d'arborescence consistant à importer une dépendance en important ce qui est requis du paquet global réduit la taille des dépendances importées.

Pourquoi avons-nous besoin d'arborescence?

Le concept d'arborescence Il est très important de secouer lorsqu'il s'agit de créer une base de code optimisée, car cela peut réduire considérablement la taille de l'ensemble de l'application en cours de développement. Les dépendances que nous avons installées dans notre application peuvent entraîner des performances lentes pour nos applications. La raison en est que la plupart des packages que nous installons n’ont pas vraiment besoin de toutes leurs dépendances, ce qui entraîne l’importation de bundles volumineux pour lesquels nous n’avons besoin que d’une petite partie du bundle. Un exemple typique est le paquetage lodash, comme dans l'exemple ci-dessus, dans lequel vous n'avez besoin d'importer qu'une de ses dépendances, puis au lieu d'installer le paquetage entier, nous n'en importons qu'une fraction.

Tree-Shaking dans React avec différents bundles: webpack et Rollup

Devoir implémenter une agitation par arbre avec React nécessitera de disposer d'un bundle de module qui regroupera l'intégralité de la base de code. Un exemple utile pour réaliser cette tâche consiste à utiliser webpack ou Rollup pour regrouper votre application.

webpack

webpack est un bundle de modules JavaScript dont le but principal est de regrouper des fichiers JavaScript pour les utiliser dans le navigateur. webpack prend en charge la gestion d'arborescence, mais le fait qu'il utilise le package babel-preset-env, qui regroupe vos fichiers et les transforme à nouveau en module CommonJS, est toutefois un sujet de préoccupation. Comme CommonJS n'est pas typé de manière statique, cela signifie qu'il sera difficile de faire trembler les paquets.

Pour réaliser le bouleversement de l'arborescence tout en regroupant l'application, certaines configurations seront nécessaires pour l'activer, avec WebPack.

 // webpack.config.js 
 const  HtmlWebPackPlugin  =   besoin de  ( 'html-webpack-plugin' ). 


module .  exports  =   {
  module :   {
    règles :   [
       {
        test :   / . (js | jsx) $ / 
        exclure :   / node_modules / 
        use :   {
          loader :  babel  -  loader 
           / * Cette configuration aide babel-preset-env à désactiver le transfert des modules d'importation ou d'exportation vers commonJS * / 
          options :   {
            presets :   [
               [  'es2015'   { modules :   false  } ] 
             ] 
          } 
        } 
      } 
    ] 
  } 
  plugin :   [  nouveau   HtmlWebPackPlugin   ( {
    modèle :   './ src / index.html' 
    NomFichier :   './ index.html' 
  } ) ; 
} 

Un autre concept à considérer avant de pouvoir secouer les arbres avec Webpack est la configuration des effets secondaires. . Les effets secondaires se produisent lorsqu'une fonction ou une expression modifie un état en dehors de son propre contexte. Parmi les effets secondaires, citons l’appel d’une API, la manipulation du DOM et l’écriture dans une base de données. Pour exclure de tels fichiers ou informer WebPack de l'état des fichiers à transpiler, nous pouvons le configurer dans le fichier package.json ou dans le fichier webpack.config.json, comme suit: [19659079] // package.json
{
"name" : "Projet de secouement des arbres"
"effets secondaires" : false [19659008]
// Et lorsque vous souhaitez signaler à Webpack des fichiers ayant des effets secondaires.
"effets secondaires" : [
    "nom – de – fichier . js
  ]
}

La même chose peut être configurée dans le fichier de configuration webpack, qui se trouve ici dans la documentation.

 // webpack.config.json 
module .  exports  =   {
  modules :   {
    règles :   [
       {
        test :   / . (js | jsx) $ / 
        exclure :   / node_modules / 
        use :   {
          loader :  babel  -  loader 
          side  -  effets :   false  
        } 
      } 
    ] 
  } 
} 

Par conséquent, afin de tirer parti des avantages de l'arbre En agitant avec webpack, nous devons respecter les principes suivants:

• Configurer l'option webpack pour ignorer les modules de transpiling dans commonJS.
• Utiliser la syntaxe du module ES2015 (c.-à-d. importer et exporter).
• Option de propriété Configure side effects dans le fichier package.json du projet.

Rollup

Rollup est un module de liage de modules pour JavaScript qui compile de petits morceaux de code en quelque chose de plus grand et de plus complexe, comme une bibliothèque ou une application. Rollup analyse également de manière statique le code que vous importez et exclut tout ce qui n’est pas réellement utilisé. Cela vous permet d'exploiter au mieux les outils et modules existants sans ajouter de dépendances supplémentaires ni gonfler la taille de votre projet.

Par défaut, l'utilisation de Rollup en tant qu'ensemble de modules pour votre application a déjà activé la fonction d'arborescence sans qu'il soit nécessaire de configurer des fichiers supplémentaires ou d'installer un minifier automatique pour détecter les dépendances inutilisées dans le code de sortie compilé. En effet, son approche repose uniquement sur les déclarations d'importation et d'exportation.

Conclusion

La création d'applications avec plusieurs bibliothèques sans implémentation d'arborescence affectera considérablement les performances de l'application. Par conséquent, la règle ultime est de toujours inclure de bonnes pratiques pour supprimer les arbres afin d'améliorer les performances Web.

Pour en savoir plus sur la création d'applications avec React:

Consultez notre page All Things React qui contient une excellente collection d’informations et de pointeurs sur les informations React – avec des sujets d'actualité et des informations actualisées, allant du lancement à la création d'une interface utilisateur convaincante.