Ответ
Tree shaking — это процесс устранения неиспользуемого кода (dead code) из финального бандла при сборке проекта. Он работает на этапе компиляции, анализируя зависимости между модулями через статический анализ (ES6 import/export).
Как работает:
- Сборщик (Webpack, Rollup) определяет, какие экспорты реально используются.
- Неиспользуемые модули/функции исключаются из бандла.
Условия для работы:
- Использование ES-модулей (
import/export). - Отсутствие side effects в модулях (можно пометить в
package.json:"sideEffects": false).
Пример:
// math.js
export const add = (a, b) => a + b;
export const unused = () => console.log('Это удалится!');
// main.js
import { add } from './math.js';
console.log(add(2, 3)); // unused не попадет в бандлВажно: Tree shaking не удалит код, импортированный через require (CommonJS) или динамические импорты.
Ответ 18+ 🔞
А, ну это ж про то, как от проекта отпиливать всё лишнее, чтобы он не весил как чугунный мост! Tree shaking, блядь, называется. Слушай, представь: ты пишешь проект, там дохуя библиотек, а используешь ты из них процентов десять, не больше. И вот эта самая штука — она как хирург-максималист, который режет без наркоза. Берёт и выкидывает нахуй весь мёртвый код, который нигде не вызывается.
Как оно бахает:
- Сборщик, будь то Webpack или Rollup, начинает умничать. Он смотрит на все твои
importиexportи строит граф зависимостей, как конспиролог на стероидах. - Всё, что висит без дела — функции, переменные, целые модули — идёт на выброс. Пиздец, как будто их и не было.
Но есть нюансы, ёпта! Чтобы эта магия работала, нужно:
- Писать на ES-модулях. Эти твои
import { add } from './math'— самое то. А вот если ты старый пердун и юзаешьrequire, то можешь забыть. Ни хуя не вытрясется. - В
package.jsonбиблиотеки должно быть прописано"sideEffects": false. Это такая бумажка «я, нижеподписавшийся, клянусь, что мой модуль не делает хуйни вроде автоматической регистрации глобальных полифилов при импорте». Если side effects есть — сборщик побоится это удалять, а то мало ли что сломается.
Смотри, наглядный пиздец:
// math.js
export const add = (a, b) => a + b;
export const unused = () => console.log('Это удалится, нахуй оно не сдалось!');
// main.js
import { add } from './math.js';
console.log(add(2, 3)); // А про unused все забудут, как про вчерашний деньВ итоге в бандле будет только функция add. А unused отправится в цифровое небытие, ебать её в сраку. Чистая экономия, ядрёна вошь!
И главное запомни: если ты импортируешь что-то через require или динамически (import('module')), то тут tree shaking бессилен. Он же статический анализ делает, а не ясновидящий, блядь. Всё, что определяется в рантайме, для него — тёмный лес. Так что держи ухо востро, а код — в чистоте.