Анализ и уменьшение размера бандла — удаление неиспользуемых зависимостей

Почему размер бандла имеет значение?

Когда речь идет о мобильных приложениях, размер бандла напрямую влияет на:

1. Время загрузки приложения: чем больше бандл, тем дольше его загрузка, особенно на устройствах с ограниченной пропускной способностью сети.
2. Использование ресурсов устройства: большие бандлы занимают больше оперативной памяти и могут замедлять работу приложения на менее мощных телефонах.
3. Общий пользовательский опыт: никто не любит ждать. Меньшие бандлы означают быстродействие и более плавный опыт взаимодействия с приложением.

Не забывайте: минимизация бандла не только улучшает производительность, но и снижает потребляемый трафик пользователей (особенно если они используют мобильный интернет).

Проблемы большого бандла

Большой бандл может быть вызван несколькими факторами:

• Неоптимально используемые библиотеки: например, вы подключили библиотеку, но используете только малую часть ее функциональности.
• Дублирование кода: случайно импортировали один и тот же модуль несколько раз в разных частях проекта.
• Остатки кода и зависимостей: библиотеки или модули, которые больше не используются, но все еще остаются в проекте.
• Неправильная сборка: неиспользуемый код из библиотек включается в бандл, если не настроен tree-shaking.

Как уменьшить размер бандла?

1. Анализ бандла

Чтобы понять, что именно увеличивает размер вашего бандла, можно использовать анализаторы, такие как webpack-bundle-analyzer. Хотя React Native не использует Webpack, этот инструмент поможет анализировать зависимости и находить узкие места.

Для начала установим react-native-bundle-visualizer:

npm install -g react-native-bundle-visualizer

Теперь добавим скрипт в package.json:

"scripts": {
  "analyze": "react-native-bundle-visualizer",
  "android:analyze": "react-native-bundle-visualizer --platform android",
  "ios:analyze": "react-native-bundle-visualizer --platform ios"
}

Запустим анализ для Android:

npm run android:analyze

После выполнения команды откроется интерактивная визуализация вашего бандла, где вы увидите, какие модули занимают больше всего места.

2. Удаление неиспользуемых зависимостей

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

Шаги:

1. Запустите команду для анализа зависимостей:

npm prune

Эта команда удалит все пакеты, которые не указаны в вашем package.json.

2. Воспользуйтесь утилитой depcheck:

npx depcheck

depcheck покажет неиспользуемые зависимости. Например:

Unused dependencies
* moment
* lodash

Если какая-то из перечисленных зависимостей действительно не используется в вашем проекте, удалите ее:

npm uninstall moment

3. Модульный импорт

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

Например:

// Плохо
import _ from 'lodash';
const result = _.uniq([1, 2, 2, 3]);

// Хорошо
import uniq from 'lodash/uniq';
const result = uniq([1, 2, 2, 3]);

4. Tree-shaking

Tree-shaking помогает исключить неиспользуемый код из бандла при сборке. Большинство современных библиотек поддерживают эту технологию, но она работает исключительно с модулями типа ES6.

Для этого убедитесь, что используете версии библиотек, поддерживающие ES-модули. Пример:

"module": "dist/index.esm.js"

5. Замена тяжелых библиотек на легковесные аналоги

Иногда крупные библиотеки можно заменить на маленькие специализированные альтернативы.

Пример замены Moment.js:

Moment.js — это мощная библиотека для работы с датами, но она весит около 70 КБ. Вместо нее можно использовать более легкий date-fns или dayjs:

npm install dayjs

Вместо:

import moment from 'moment';
const now = moment().format('YYYY-MM-DD');

Используйте:

import dayjs from 'dayjs';
const now = dayjs().format('YYYY-MM-DD');

6. Использование кода только на платформе

React Native предоставляет возможность использовать платформо-зависимые файлы, такие как .ios.tsx и .android.tsx. Вы можете настроить сборку так, чтобы код для других платформ исключался из бандла.

7. Удаление сторонних библиотек из DevDependencies на продакшене

Обязательно проверьте, что в вашем продакшн-бандле не используются библиотеки, указанные в devDependencies. Например, тестовые библиотеки или линтеры:

npm prune --production

8. Ленивая загрузка

React.lazy и динамическая загрузка компонентов позволяют загружать только те модули, которые нужны на данный момент.

Пример:

import React, { Suspense } from 'react';

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Text>Загрузка...</Text>}>
      <HeavyComponent />
    </Suspense>
  );
}

9. Минификация кода

Убедитесь, что вы используете минификацию кода при сборке. React Native по умолчанию использует metro бандлер, который минифицирует код, но вы можете проверить настройки:

"release": {
  "minify": true
}

Разберем пример улучшения

Предположим, у нас есть приложение, которое загружает список товаров с сервера. Мы обнаружили, что большая библиотека для форматирования дат (Moment.js) и неиспользуемая зависимость (Lodash) увеличивают размер нашего бандла.

1. Удаляем Lodash:

npm uninstall lodash

2. Заменяем Moment.js на Day.js:

import dayjs from 'dayjs';

const formattedDate = dayjs().format('YYYY-MM-DD');

3. Настраиваем lazy loading для страниц:

const ProductDetail = React.lazy(() => import('./ProductDetail'));

4. Минимизируем передачу данных:

На сервере реализуем API, возвращающее только необходимые данные:

{
  "id": 1,
  "name": "Товар 1",
  "price": 100
}