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

88

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 le sentiment que c'est l'implémentation d'un DOM léger. Mais je veux être sûr.

reactjs 
— Eldar Djafarov
source
4
Avez-vous jeté un œil à la source pour voir ce qu'elle fait? Conseil utile, ne regardez pas la version minifiée.
— Mr Lister
6
J'ai décidé de demander avant de plonger dans le code. Bien que je prévois d'utiliser React, je plongerais là-bas de toute façon;)
— Eldar Djafarov
2
26k n'est pas si grand du tout ..
— BT
Les gens disent que réagir n'est pas grand. Oui, reactjs lui-même est très petit (6,41 Ko pour la version 16.1.1) mais rappelez-vous que React nécessite un ReactDOM pour fonctionner et que ReactDOM a une taille de 92,4 Ko
— Dinh Tran

Réponses:

187

React en fait pas mal! La partie la plus non évidente de React est probablement le système d'événements - non seulement React implémente sa propre répartition et diffusion d'événements, mais il normalise les événements communs entre les navigateurs afin que vous n'ayez pas à vous en soucier autant. Par exemple, SelectEventPlugin est un "plugin" d'événement intégré qui fournit un onSelectévénement qui se comporte de la même manière dans tous les navigateurs.

L' implémentation du DOM virtuel prend également une quantité décente de code; beaucoup d'efforts sont consacrés à l'optimisation des performances, c'est pourquoi la version non réduite inclut ReactPerf , qui est un outil de mesure des performances de rendu. Lors de la mise à jour du DOM, React fait également des choses pratiques pour vous, comme le maintien de toute sélection d'entrée et le maintien de la position de défilement actuelle.

React a également quelques autres astuces dans sa manche. 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 n'avez pas d'environnement de navigateur, vous pouvez donc envoyer une page qui fonctionne même avant le chargement de JS.

À quoi comparez-vous React? react-15.0.2.min.jsest 43k (gzipped), mais jQuery est 33k tandis que ember-2.6.0.prod.jsest 363k (also gzipped). De toute évidence, ces cadres ne font pas exactement les mêmes choses, mais ils se chevauchent beaucoup, donc je pense que la comparaison est raisonnable.

Si vous vous inquiétez de la taille du téléchargement, je ne m'inquiéterais pas trop de la contribution du code JS à cela. Voici une annonce que je vois sur le côté droit de ma page Stack Overflow en ce moment:

Sa taille de téléchargement est de 95k - je ne réfléchirais pas à deux fois avant d'inclure une image comme celle-ci dans une page car (même si je m'inquiétais des performances), il y a généralement tellement d'autres choses liées aux performances à corriger qui sont plus lucratives.

En bref, je ne pense pas que React soit si grand, et sa taille vient 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 étant donné tout ce qu'elle fait pour vous?"

… Mais c'est une question totalement distincte. :) J'espère avoir répondu à votre question - heureux de développer si je ne l'ai pas fait.

— Sophie Alpert
source
4
Vous avez totalement répondu à ma question. React est génial. Je pense l'utiliser pour mobile, donc la taille est importante. C'est juste qu'il n'y a pas beaucoup d'informations sur ce qu'il fait. Et je pense qu'il y a plus de trucs que je peux utiliser :) Je sens que je peux me débarrasser des trucs jquery. Et paulmillr / exosquelette est juste à temps :)
— Eldar Djafarov
2
Je creuse un concept totalement différent de création d'applications. Vérifiez vimeo.com/78151404 et github.com/component/component - en utilisant ceux que vous n'avez pas du tout besoin de jQuery et compy joue bien avec jsxtransformations. Et React fait le travail le plus difficile - tout le reste (modèles, routages, communication avec le serveur) pourrait être couvert par des microcomposants.
— Eldar Djafarov
30
Attention, nous utilisons React sur le site mobile de Facebook où la taille est définitivement extrêmement importante :)
— Vjeux
4
@lightblade Euh ... non. L'utilisation de la mémoire dépend du nombre d'allocations effectuées par votre code. React s'efforce d'éviter les allocations.
— Dan Abramov
2
@ 1nfiniti D'accord, mis à jour avec de nouveaux chiffres depuis deux ans et demi.
— Sophie Alpert
-1

Quelques réflexions ... J'avais certaines des mêmes préoccupations avec sa taille, mais après l'avoir utilisé, pas de blague, je l'utiliserais si elle faisait 5 Mo. C'est tellement bon. Cela dit, j'ai décidé de réduire autant que possible les dépendances sur d'autres bibliothèques. J'utilisais jquery pour deux choses .. ajax et la réponse ajax automatique et la gestion des demandes (beforeSend, etc.) qui géreraient quand un jeton était dans une réponse après la connexion, puis m'assurer que chaque demande ajax l'ajoutait à l'en-tête d'autorisation avant Envoi en cours. J'ai remplacé cela par un très petit morceau de javascript natif. Fonctionne très bien. Aussi, j'essayais d'utiliser _underscore. Je l'ai remplacé par du 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, parmi beaucoup d'autres sur google, que j'ai trouvé et qui propose des alternatives utilisant JS natif sur jquery.

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

— utilisateur3317868
source
1
Vous pouvez également simplement créer une version personnalisée de jQuery avec les éléments que vous utilisez si vous ciblez plusieurs navigateurs
— Dan Heberden
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.