Tree Shaking

Сам по себе Tree Shaking — это метод оптимизации кода, который позволяет автоматически удалять неиспользуемый код при сборке приложения

Основная идея заключается в том, чтобы проанализировать все файлы приложения и используемых библиотек в процессе сборки, и убрать из них всё, что не используется

Работает всё это благодаря статической системе модулей из ES6, которая позволяет точно знать что импортирует и экспортирует каждый файл

До статической системы модулей, определить это точно было невозможно, так как импорты и экспорты могли изменяться в рантайме:

// зависящий от рантайма импорт
var my_lib;
if (Math.random()) {
    my_lib = require('foo');
} else {
    my_lib = require('bar');
}

// и экспорт
if (Math.random()) {
    exports.baz = ···;
}

Код выше абсолютно валиден

ES6 же предложил статическую систему модулей, благодаря чему Tree Shaking и стал в целом возможен

В примере с прикреплённого видоса мы видим, как в конечный бандл из файла math.js попадает только функция multiply. Происходит это как раз потому что sum() не используется в коде нашей программы index.js

Настроить всё очень просто, например, с тем же Vite — он поддерживает Tree Shaking из коробки при сборке в прод режиме ( обычно это vite build )

Однако, стоит помнить, что не весь код и библиотеки поддерживают Tree Shaking. "Шейкаться" будет только тот код, что использует ES6 модули

Проанализировать сборку через Vite можно с помощью плагина rollup-plugin-visualizer — он покажет, какие модули включены в финальную сборку, и сколько они весят

Спасибо за прочтение, это важно для меня

@prog_way_blog — чат — #web #vite #theory