Dlaczego rozmiar plików Reacta jest tak duży, biorąc pod uwagę jego małe API?

Question 1

Oto liczby

min + gzip 26k
gzip 90k
oryginał 450 + k

React nie ma wielu funkcji w swojej dokumentacji. Dlaczego jest taki duży?

Mam wrażenie, że jest to implementacja lekkiego DOM. Ale chcę być pewien.

Question 2

React działa całkiem sporo! Największą nieoczywistą częścią React jest prawdopodobnie system zdarzeń - React nie tylko implementuje własne wysyłanie i propagowanie zdarzeń, ale także normalizuje typowe zdarzenia w przeglądarkach, dzięki czemu nie musisz się o to martwić. Na przykład SelectEventPlugin to wbudowana „wtyczka” onSelectzdarzenia, która zapewnia zdarzenie zachowujące się w ten sam sposób we wszystkich przeglądarkach.

Wirtualny DOM realizacja bierze przyzwoitą ilość kodu, jak również; dużo wysiłku poświęca się na optymalizację wydajności, dlatego niezminifikowana wersja zawiera ReactPerf , który jest narzędziem do pomiaru wydajności renderowania. Aktualizując DOM, React robi również kilka wygodnych rzeczy, takich jak utrzymywanie dowolnego wyboru wejścia i utrzymywanie tej samej bieżącej pozycji przewijania.

React ma też kilka innych sztuczek w rękawie. Jednym z najfajniejszych jest to, że w pełni obsługuje renderowanie komponentu do ciągu HTML, nawet jeśli nie masz środowiska przeglądarki, więc możesz wysłać stronę, która działa nawet przed załadowaniem JS.

Z czym porównujesz React? react-15.0.2.min.jsjest 43k (gzipped), ale jQuery jest 33k, podczas gdy ember-2.6.0.prod.jsjest 363k (also gzipped). Oczywiście te frameworki nie robią dokładnie tych samych rzeczy, ale w dużym stopniu się pokrywają, więc myślę, że porównanie jest rozsądne.

Jeśli martwisz się o rozmiar pobierania, nie martwiłbym się zbytnio o kod JS, który się do tego przyczyni. Oto reklama, którą widzę teraz po prawej stronie mojej strony Stack Overflow:

Jego rozmiar do pobrania to 95k - nie zastanawiałbym się dwa razy nad umieszczeniem takiego obrazu na stronie, ponieważ (nawet gdybym martwił się o wydajność) jest zwykle wiele innych rzeczy związanych z wydajnością do naprawienia, które są bardziej lukratywne.

Krótko mówiąc, nie sądzę, aby React był tak duży, a jego rozmiar wynika z wielu małych rzeczy, które robi, aby ci pomóc. Cytujesz małe API Reacta jako powód, dla którego kod Reacta powinien być mały, ale lepszym pytaniem może być: „W jaki sposób API Reacta może być tak proste, biorąc pod uwagę wszystkie rzeczy, które robi dla Ciebie?”

… Ale to zupełnie osobna kwestia. :) Mam nadzieję, że odpowiedziałem na twoje pytanie - chętnie rozszerzę, jeśli nie.

Question 3

Kilka przemyśleń ... Miałem podobne obawy co do rozmiaru, ale po użyciu, nie żartuję, użyłbym go, gdyby miał 5MB. To jest po prostu dobre. To powiedziawszy, zdecydowałem się zmniejszyć jak najwięcej zależności od innych bibliotek. Używałem jquery do dwóch rzeczy. Ajax i automatyczna odpowiedź AJAX i obsługa żądań (beforeSend, itp.), Która obsługiwałaby, gdy token był w odpowiedzi po zalogowaniu, a następnie upewniał się, że każde żądanie ajax dodało go do nagłówka Authorization wcześniej wysyłanie. Zastąpiłem to bardzo małym, prostym fragmentem natywnego javascript. Działa świetnie. Próbowałem też użyć _underscore. Zastąpiłem go lodash, który jest mniejszy i szybszy, chociaż obecnie go nie używam, więc mogę go całkowicie usunąć.

Oto jeden z wielu artykułów w Google, który znalazłem i ma kilka alternatyw wykorzystujących natywny JS zamiast jquery.

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