Почему при импорте одной функции может подтянуться вся библиотека?

Когда вы импортируете одну функцию из библиотеки, вы ожидаете, что в итоговый бандл попадёт только её код. Однако иногда подтягивается вся библиотека, что увеличивает размер приложения. Это связано с работой сборщиков модулей, таких как Webpack или Rollup, и их способностью выполнять "tree shaking" — удаление мёртвого кода.

Как работает tree shaking

Tree shaking — это процесс статического анализа импортов и экспортов в ES-модулях. Сборщик определяет, какие экспорты действительно используются, и исключает неиспользуемые. Для этого код должен быть написан в формате ES-модулей (import/export), так как он статически анализируем.

Почему tree shaking может не сработать

• Побочные эффекты (side effects): Если модуль выполняет действия при импорте (например, регистрирует полифиллы или изменяет глобальный объект), сборщик не может его удалить, так как это может сломать приложение. В конфигурации Webpack нужно явно указать sideEffects: false для библиотек без побочных эффектов.
• CommonJS-модули: Библиотеки, экспортируемые через module.exports, динамически загружаются, что затрудняет анализ. Сборщики часто не могут удалить неиспользуемый код из таких модулей.
• Структура экспортов: Если библиотека экспортирует все функции через единый объект (например, import _ from 'lodash'), то даже при использовании одной функции может подтянуться весь модуль. Современные версии библиотек часто поддерживают модульные импорты (например, import debounce from 'lodash/debounce').

Пример кода и настройки

Рассмотрим пример с библиотекой, которая не поддерживает tree shaking из-за побочных эффектов:

// mathUtils.js
export function add(a, b) {
  return a + b;
}
export function multiply(a, b) {
  return a * b;
}
// Побочный эффект: изменение глобальной переменной
window.myLib = { version: '1.0' };

При импорте только add сборщик может включить весь модуль, так как есть побочный эффект. Чтобы это исправить, нужно вынести побочные эффекты в отдельный модуль или указать в package.json библиотеки:

{
  "name": "my-lib",
  "sideEffects": false
}

Практические рекомендации

• Используйте библиотеки, которые поддерживают ES-модули и tree shaking (например, Lodash ES-версия).
• Настраивайте sideEffects в конфигурации Webpack или в package.json.
• Проверяйте размер бандла с помощью инструментов вроде Webpack Bundle Analyzer.

Вывод: Tree shaking — мощный метод оптимизации, но он требует корректной структуры кода и настройки сборщика. Применяйте его для уменьшения размера бандла в production-сборках, особенно в больших приложениях с множеством зависимостей.