Если вы разработали нативное приложение для реагирования, вы, возможно, знаете, что большой пакет может увеличить время запуска вашего приложения и может задержать рендеринг контента. В этой статье мы обсудим некоторые простые приемы, которые можно использовать для уменьшения размера пакета и улучшения времени запуска вашего приложения, отвечающего за реакцию.

Как вы, возможно, знаете, инструмент упаковки React Native — это не веб-пакет, а Metro, разработанный Facebook. Хотя детали конфигурации отличаются, принципы одинаковы.

React Native или, точнее, Metro-Bundler, который поставляется с React Native по умолчанию, не поддерживает tree-shaking.

По этой причине мы в основном уменьшаем объем связки по трем направлениям:

  • Для той же функции предпочтите меньшую стороннюю библиотеку
  • Используйте плагин babel, чтобы избежать полных ссылок
  • Разработать стандарты кодирования для уменьшения дублирования кодов

Ниже приведены несколько примеров, поясняющих приведенные выше идеи.

  1. Визуализация пакета с помощью react-native-bundle-visualizer

Нам нужно проверить, что находится в комплекте, прежде чем мы начнем его оптимизировать. Итак, для этого у react-native есть очень полезный инструмент react-native-bundle-visualizer. С помощью этого инструмента очень просто использовать и анализировать различные вещи в комплекте. Кроме того, после просмотра вывода мы можем легко принять решение об удалении некоторых неиспользуемых модулей.

2. Использование небольших сторонних библиотек

Здесь мы будем рассматривать пример dayjs и momentjs. Пожалуйста, просмотрите размеры пакетов обеих библиотек на изображениях ниже. Если в проекте используется moment.js, замена его на day.js может сразу уменьшить размер JSBundle без потери какой-либо функциональности.

3. Избегайте полных ссылок на модули

Всегда лучше избегать использования полных ссылок на некоторые модули, если мы используем только несколько методов из них. Чтобы разобраться подробнее, рассмотрим на примере одной из самых популярных JS-библиотек Lodash.

Lodash упрощает работу с JavaScript, избавляя от необходимости работать с массивами, числами, объектами, строками и т. д. В большинстве случаев нам нужны только некоторые функции из библиотеки, но если мы используем оператор импорта с полной ссылкой, это стоит почти 70 КБ.

Поэтому, чтобы уменьшить размер пакета, лучше указать один файл, как показано ниже.

import join from ‘lodash/join’

Но это может стать проблемой, когда у нас есть несколько разных функций, потому что у нас будет отдельный оператор импорта для каждой из них, и, чтобы избежать этого, мы можем использовать babel-plugin-lodash.

По сути, этот плагин для Babel поможет нам добиться следующего.

import {join} from 'lodash'
import { add } from 'lodash/fp'
// ⬇ 
i️mport _join from 'lodash/join'
import _add from 'lodash/fp/add'

Я провел простой тест. Для приложения React Native, которое только что было инициализировано, я пробовал описанные выше вещи, и ниже вы можете увидеть влияние на размер пакета.

  • Полный импорт Lodash привел к увеличению примерно на 72,9 КБ.

  • (импорт соединения из lodash/join) привело к увеличению всего на 141 Б.

Заключение

В этой статье в основном обобщаются и анализируются различные методы оптимизации, которые можно использовать для уменьшения размера пакета JS.

Если вам понравилась эта история, нажмите кнопку 👏 и поделитесь ею, чтобы другие тоже могли ее найти! Кроме того, не стесняйтесь оставлять комментарии ниже.

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

Мы нанимаем. Посмотреть вакансии здесь.