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

Сегодня я хочу рассказать об очень эффективном методе оптимизации размера вашего бандла под названием Tree Shaking.

Традиционно мы устанавливаем модуль и импортируем методы, которые мы используем, из модуля. Во многих модулях методы в них не экспортируются отдельно и являются частью единого экспорта по умолчанию, который мы возражаем деконструировать из импорта по умолчанию. Самый распространенный пример этого:

import { Box } from "@material-ui/core"

Это приводит к тому, что webpack объединяет все методы модуля. Даже если мы не используем ни один из них.

Есть несколько способов избежать этого. Некоторые библиотеки, такие как lodash, позволяют вам устанавливать только то, что вам нужно. Вместо установки всей библиотеки lodash вы можете установить только необходимый модуль, например lodash.get или lodash.trottle.

Другой метод — встряхивание дерева, когда мы по-прежнему устанавливаем полную библиотеку, но когда мы упаковываем наш пакет, мы сообщаем веб-пакету, что импортируем только часть большей библиотеки.

https://material-ui.com/guides/minimizing-bundle-size/#option-1

Вместо:

import { Box } from "@material-ui/core"

Сделай это:

import Box from "@material-ui/core/Box";

Точно так же пример lodash: вместо:

import { groupBy } from "lodash";

Сделай это:

import groupBy from "lodash/groupBy";

Альтернативный метод

Существует также подключаемый модуль Babel, который может сделать это за вас: babel-plugin-tree-shaking-import

Согласованное соглашение об импорте

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

Еще одна причина, по которой стоит обратить внимание на плагин babel, заключается в том, что это достигается автоматически.

Этот пост был впервые опубликован в моем личном блоге: https://mfyz.com/optimize-your-bundle-size-by-eliminating-dead-code-tree-shaking-in-webpack/