Pourquoi la taille de fichier de React est-elle si grande compte tenu de sa petite API?

Voici les chiffres

  • min + gzip 26k
  • gzip 90k
  • original 450 + k

Et React n’a pas beaucoup de fonctionnalités dans sa documentation. Pourquoi est-ce si grand?

J’ai l’impression que c’est l’implémentation de DOM légers. Mais je veux être sûr.

Réagissez pas mal! La plus grande partie non évidente de React est probablement le système des événements – React ne se contente pas d’implémenter son propre système d’envoi et de diffusion d’événements, il normalise les événements communs à tous les navigateurs, ce qui vous évite de vous inquiéter. Par exemple, SelectEventPlugin est un événement intégré “plugin” qui fournit un événement onSelect qui se comporte de la même manière dans tous les navigateurs.

L’implémentation du DOM virtuel prend également une quantité de code décente. beaucoup d’efforts sont consacrés à l’optimisation des performances, c’est pourquoi la version non modifiée inclut ReactPerf , un outil de mesure des performances de rendu. Lors de la mise à jour du DOM, React effectue également des opérations pratiques, telles que le maintien de toute sélection d’entrée et le maintien de la position de défilement actuelle.

React a également quelques autres tours dans son sac. L’un des plus intéressants est qu’il prend entièrement en charge le rendu d’un composant dans une chaîne HTML, même si vous ne disposez pas d’un environnement de navigateur. Vous pouvez donc envoyer une page qui fonctionne même avant le chargement de JS.


Qu’est-ce que tu compares contre React? react-15.0.2.min.js est 43k (gzipped) , mais jQuery est 33k alors que ember-2.6.0.prod.js est 363k (also gzipped) . Évidemment, ces frameworks ne font pas exactement la même chose, mais ils se chevauchent beaucoup, alors je pense que la comparaison est raisonnable.

Si la taille du téléchargement vous inquiète, je ne m’inquiéterais pas trop du fait que le code JS y consortingbue. Voici une annonce que je vois à droite de ma page Stack Overflow:

Sa taille de téléchargement est de 95k – je ne penserais pas à inclure une image comme celle-là dans une page parce que (même si je m’inquiétais des performances) il y a généralement beaucoup d’autres choses à résoudre.


En bref, je ne pense pas que React soit si grand et que sa taille provient des nombreuses petites choses qu’il fait pour vous aider. Vous citez la petite API de React comme une raison pour laquelle le code de React devrait être petit, mais une meilleure question pourrait être, “Comment l’API de React peut-elle être si simple compte tenu de tout ce qu’elle fait pour vous?”

… Mais c’est une question totalement distincte. 🙂 J’espère avoir répondu à votre question – heureux d’élargir si je n’ai pas.

Quelques reflections. J’avais les mêmes soucis de taille, mais après l’avoir utilisé, pas de blague, je l’utilisais si la taille était de 5 Mo. C’est juste que bon. Cela dit, j’ai décidé de réduire autant de dépendances que possible sur les autres bibliothèques. J’utilisais jquery pour deux choses .. ajax et la réponse automatique ajax et la gestion des requêtes (beforeSend, etc) qui prendrait en charge un jeton dans une réponse après connexion, puis assurez-vous que chaque requête ajax l’ajoute à l’en-tête Authorization avant envoi. Je l’ai remplacé par un petit code javascript natif. Fonctionne très bien. De plus, j’essayais d’utiliser _underscore. Je l’ai remplacé par lodash, qui est plus petit et plus rapide, bien que je ne l’utilise pas actuellement, donc je peux le supprimer complètement.

Voici un article, sur beaucoup de google, que j’ai trouvé qui contient des alternatives utilisant JS natif sur jquery.

http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/