Анализ библиотеки компонентов React

С тех пор, как я начал использовать React, я всегда использовал с ним какие-то сторонние библиотеки.

Помню, когда я изучал React, я использовал его в большом старом проекте Laravel, пытаясь завершить задачу более двух дней, что в противном случае заняло бы всего несколько часов, если бы я не использовал React; но ничего страшного, я просто учился и тренировался 😅

В те дни я никогда не задумывался о размере пакета, потому что шаблон, который мы использовали, содержал много файлов JavaScript и CSS (почти 2 МБ), поэтому мой простой пакет React не имел большого значения.

Но когда мы начали создавать новые проекты, используя только React, стало очевидно, насколько медленным было приложение. Поскольку все мое приложение было JavaScript (точнее, много JavaScript), и если JavaScript загружается медленно, то все приложение загружается медленно. И я объясню причину такого большого размера пакета.

Откройте для себя дизайн муравьев

Тогда, когда мы искали подходящую и богатую библиотеку компонентов React, единственной библиотекой, которая нас удовлетворила, была Ant Design. Это действительно красивая, аккуратная и очень богатая библиотека компонентов React; у него хороший UX и есть все необходимое для создания наших приложений.

Однако, написав несколько страниц, мы поняли, что размер пакета становится все больше и больше, и даже разбиение кода не помогло. И у нас не было изображений или видео, которые повлияли бы на начальную загрузку страницы. Ant Design с базовой настройкой делает размер вашего пакета почти 1,5 МБ (без gzip). Причем говорят, что Ant Design по умолчанию поддерживает Tree Shaking. Но даже с Tree Shaking и разделением кода это был (и остается) довольно большой пакет, который мы отправляем в продакшн.

Обсуждение обходится дешево, поэтому позвольте мне показать вам небольшую демонстрацию того, как добавление одной кнопки из Ant Design влияет на размер вашего пакета.

Начальное приложение Create-react-app

Чтобы показать вам, насколько будет разница, давайте сначала посмотрим, каков начальный размер пакета приложения, созданного с помощью create-react-app. Я не буду использовать source-map-explorer, я просто продемонстрирую это с помощью Chrome DevTools.

Как видно из рисунка, все передаваемые ресурсы (включая исходный CSS и логотип React, поставляемые с приложением create-react-app) занимают всего 128 КБ. И самый большой файл здесь - это основной блок (который, вероятно, представляет собой коды React), его размер составляет всего 116 КБ. Итак, что делает этот крошечный пакет настолько большим, что он превышает 1 МБ? Посмотрим и на это.

Ant Design с базовой настройкой

Установим Ant Design, следуя инструкциям, приведенным в документации. При очень простой (и ленивой) настройке мы устанавливаем пакет antd с помощью нашего диспетчера пакетов и включаем целые файлы CSS Ant Design (да, все они 😎) в наш App.css файл. Затем мы добавляем единственную первичную кнопку в наш App.js файл. Посмотрите, что происходит с нашими файлами сборки:

Как видно на картинке, сейчас мы отправляем более 1 МБ ресурсов. Если мы пропустим тот факт, что мы импортировали все файлы CSS Ant Design, что заставляет нас поставлять на 500 КБ больше таблиц стилей, наш основной блок JavaScrtipt также вырос со 116 КБ до 674 КБ.

Я имею в виду, что мы говорим о большой библиотеке компонентов React с открытым исходным кодом, которая насчитывает около 1000 участников и более 49000 звезд, разве они не знают об этой проблеме?

Они, действительно, есть, и в своей документации немного говорится об этой проблеме:

Сейчас мы успешно запускаем компоненты antd, но в реальном мире по-прежнему существует много проблем с antd-demo. Например, мы фактически импортируем все стили компонентов в проект, что может быть проблемой производительности сети.

И они предоставляют расширенные рекомендации по использованию модульного импорта; Это просто означает, что мы отправляем только те стили компонентов, которые мы используем, а не все из них.

Использование расширенных руководств Ant Design

Давайте посмотрим на их продвинутых гидов и сделаем то, что они просят. Я не буду вдаваться в подробности, как это сделать, они очень хорошо объясняют это в документации. Что они делают, так это просто настраивают приложение create-response-app с некоторыми пакетами и записывают переопределения в конфигурацию webpack без запуска eject.

Они исправляют импорт babel, поэтому при импорте, скажем, кнопки, файлы CSS, связанные с этой кнопкой, также будут импортированы, и нам не нужно будет импортировать все файлы CSS в App.css.

После выполнения этой настройки давайте посмотрим, как это повлияло на размер нашего пакета:

Мы поставляем таблицы стилей на 400 КБ меньше, и теперь мы знаем, что эта кнопка имеет 74 КБ стилей, но наш фрагмент Javascript по-прежнему занимает 674 КБ 😄

Это очень много для простой кнопки, правда? И как это исправить?

Я действительно не знаю, как это исправить; Может быть, нам следует избегать его использования, или, может быть, они выпустят что-то под названием And Design Lite 💭 Я изучил исходный код и увидел, что компонент кнопки также экспортирует компонент группы кнопок; кроме того, файл button.tsx содержит 318 строк кода и использует несколько внешних и внутренних зависимостей.

Заключение

Использование большого количества пакетов npm помогает нам разрабатывать наше приложение намного быстрее, но есть риск заставить наших пользователей возненавидеть приложение.

Если кто-то знает более богатую, но с небольшим размером пакета - библиотеку компонентов React, то, пожалуйста, дайте мне знать. Или вы думаете, что лучше построить собственный? 😏

Спасибо за чтение, и если вы обнаружите, что в этой статье что-то не так, не стесняйтесь писать в комментариях.