Что такое tree shaking в Webpack?

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

Пример:

// utils.js
export function used() {
  	console.log('Used function');
}
export function unused() {
  	console.log('Unused function');
}

// index.js
import { used } from './utils';
used();

Здесь функция unused не используется и будет удалена из сборки, если включен режим production и используется TerserPlugin.

Tree shaking работает только с модулями ES6 (import/export) и требует оптимизации:

module.exports = {
  	mode: 'production', // Режим для включения tree shaking
  	optimization: {
    		usedExports: true, // Маркирует используемые экспорты
  	},
};

Это сокращает размер кода и ускоряет загрузку приложения.