Тришейкинг (Tree Shaking) – это процесс удаления неиспользуемого кода из вашего конечного бандла. В контексте JavaScript и фронтенд разработки, это означает, что сборщики модулей, такие как Webpack или Rollup, анализируют ваш код на предмет экспортов, которые нигде не используются, и не включают их в итоговый файл. Это позволяет существенно уменьшить размер бандла, что положительно сказывается на времени загрузки приложения. Например, если вы импортировали библиотеку, но использовали только одну функцию из нее, тришейкинг позволит исключить из бандла все остальные неиспользуемые функции.
Как работает тришейкинг:
1. Вы объявляете импорты и экспорты в каждом модуле.
2. Сборщик (Webpack, Rollup или другой) во время сборки анализирует дерево зависимостей.
3. Неиспользуемый код исключается из итогового бандла.
Порядок настройки (на примере Webpack):
1. Убедитесь, что используете версию Webpack, поддерживающую тришейкинг (обычно это версия 2 и выше).
2. В вашем
webpack.config.js установите mode в значение production. Это автоматически включит тришейкинг.3. Используйте ES6 модули (`import` и `export`), так как тришейкинг работает только с ними.
Бывают спрашивают вопрос на собеседовании. Вообще вопросы по оптимизации частенько задаю. Думаю расскажу вам о них в постах.