React Frontend Developer

Question 1

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

Accepted Answer

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

Question 2

Из каких структур состоит render tree?

Accepted Answer

Render tree строится на основе DOM и CSSOM. В него попадают только те элементы, которые должны отображаться на странице, и для каждого вычисляются стили. Затем render tree используется для layout и последующей отрисовки. Элементы с display: none в render tree не попадают.

Question 3

Почему при импорте одной функции может подтянуться вся библиотека?

Accepted Answer

При импорте одной функции может подтянуться вся библиотека, если сборщик модулей (например, Webpack) не может безопасно удалить неиспользуемый код. Это происходит, когда модуль имеет побочные эффекты (side effects) при импорте, например, изменяет глобальные переменные или выполняет код. Также некоторые библиотеки не поддерживают tree shaking из-за структуры экспортов (например, экспорт через единый объект). Чтобы избежать этого, нужно использовать библиотеки с поддержкой ES-модулей и настраивать sideEffects в конфигурации сборщика.

Вопросы React Frontend Developer