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

Question

Tree shaking — это процесс удаления неиспользуемого кода из сборки. Он работает с модулями ES6, используя статический анализ для исключения "мертвого" кода.

YeaHub · Accepted Answer

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, // Маркирует используемые экспорты
  	},
};Это сокращает размер кода и ускоряет загрузку приложения.