Почему размер файла React такой большой, учитывая его маленький API?

86

Вот цифры

  • min + gzip 26k
  • gzip 90k
  • оригинал 450 + k

И React не содержит много функций в документации. Почему он так велик?

У меня такое ощущение, что это реализация облегченного DOM. Но я хочу быть уверенным.

  • 4
    Вы посмотрели на источник, чтобы увидеть, что он делает? Полезный совет, не смотрите на минимизированную версию.
  • 6
    Я решил спросить, прежде чем погружаться в код. Хотя, поскольку я планирую использовать реакцию, я все равно буду там нырять;)
Показать ещё 2 комментария
Теги:

2 ответа

181
Лучший ответ

Реакция идет совсем немного! Самая большая неочевидная часть React - это, вероятно, система событий - не только React реализует собственную диспетчеризацию событий и пузырь, он нормализует общие события в браузерах, поэтому вам не нужно беспокоиться об этом. Например, SelectEventPlugin является встроенным событием "плагин", который предоставляет событие onSelect, которое ведет себя одинаково во всех браузерах.

Реализация "виртуальной DOM" также требует достойного количества кода; на оптимизацию производительности затрачивается много усилий, поэтому в неиниминированную версию входит ReactPerf, которая является инструментом для измерения производительности рендеринга. При обновлении DOM React также делает некоторые удобные вещи для вас, как поддержание любого выбора ввода и сохранение текущей позиции прокрутки.

Реакция также имеет несколько других трюков в рукаве. Один из самых классных - это то, что он полностью поддерживает рендеринг компонента в строку HTML, даже если у вас нет среды браузера, поэтому вы можете отправить страницу, которая работает даже до загрузки JS.

С чем вы сравниваете React? response-15.0.2.min.js - 43k (gzipped), но jQuery - 33k, тогда как ember-2.6.0.prod.js - 363k (также gzipped). Очевидно, что эти структуры не выполняют точно то же самое, но у них много перекрытий, поэтому я считаю, что сравнение разумно.

Если вы беспокоитесь о размере загрузки, я бы не стал слишком беспокоиться о том, что JS-код способствует этому. Здесь объявление, которое я вижу в правой части моей страницы прямо сейчас:

Изображение 2710

Его размер загрузки составляет 95 тыс. - я бы не подумал дважды о включении такого изображения на странице, потому что (даже если меня беспокоило производительность), как правило, так много других проблем, связанных с производительностью, для исправления, которые больше прибыльный.

Короче говоря, я не думаю, что React такой большой, и какой размер он действительно имеет, это из-за многих мелких вещей, которые он делает, чтобы помочь вам. Вы цитируете React small API в качестве причины того, что код React должен быть небольшим, но лучшим может быть вопрос: "Как React API может быть настолько простым, учитывая все, что он делает для вас?"

... но это совершенно отдельный вопрос.:) Надеюсь, я ответил на ваш вопрос - рад расширить, если я этого не сделал.

Поделиться
  • 3
    Вы полностью ответили на мой вопрос. Реакция потрясающая. Я думаю об использовании его для мобильных устройств, поэтому размер имеет важное значение. Просто мало информации о том, что он делает. И я думаю, что есть больше уловок, которые я могу использовать :) Я чувствую, что могу избавиться от jquery. И paulmillr / экзоскелет как раз вовремя :)
  • 0
    Здорово! Я думаю, что вполне возможно избежать jQuery, если вы реализуете с нуля и не хотите использовать какие-либо плагины jQuery. Единственное, что я действительно недавно хотел, чтобы jQuery - это ajax, но есть и другие библиотеки, которые делают то же самое.
Показать ещё 12 комментариев
-3

Несколько мыслей. У меня были некоторые из тех же проблем с этим размером, но после его использования, без шуток, я бы использовал его, если он был размером 5 МБ. Это просто хорошо. Тем не менее, я решил уменьшить как можно больше зависимостей от других библиотек. Я использовал jquery для двух вещей: ajax и автоматический ответ ajax и обработку запросов (beforeSend и т.д.), Которые будут обрабатывать, когда токен был в ответе после входа в систему, а затем убедитесь, что каждый запрос ajax добавил его в заголовок авторизации перед отправка. Я заменил это на супер маленький простой бит собственного javascript. Прекрасно работает. Кроме того, я пытался использовать _underscore. Я заменил его lodash, который меньше и быстрее, хотя в настоящее время я его не использую, поэтому он может полностью удалить его.

Вот одна статья из многих в google, которую я обнаружил, что имеет некоторые альтернативы, используя встроенный JS поверх jquery.

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

Поделиться
  • 7
    youmightnotneedjquery.com
  • 1
    Вы также можете просто создать пользовательскую версию jQuery из кусочков, которые вы используете, если вы ориентируетесь на несколько браузеров.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню