Проверяет понимание того, как сборщики модулей обрабатывают неиспользуемые зависимости и попадают ли они в итоговый продакшн-бандл.
Когда вы собираете проект для продакшена, сборщик (например, Webpack) строит граф зависимостей, начиная с точки входа. Если библиотека нигде не импортируется, она не попадает в этот граф и, следовательно, не включается в итоговый бандл. Это называется исключением мёртвого кода (dead code elimination) и является частью процесса tree shaking.
sideEffects: false).mode: 'production' в Webpack), который включает минификацию и удаление неиспользуемого кода.// main.js
import { usedFunction } from './utils';
// Библиотека lodash не импортируется, поэтому не попадёт в бандл
console.log(usedFunction());
// utils.js
export function usedFunction() { return 'ok'; }
export function unusedFunction() { return 'no'; } // будет удалена при tree shakingЕсли бы вы написали import _ from 'lodash', но не использовали _, то в зависимости от настроек сборщик мог бы удалить импорт, но если библиотека использует CommonJS, она может попасть в бандл целиком.
Некоторые библиотеки имеют побочные эффекты при импорте (например, полифиллы), поэтому их нельзя просто удалить. Для таких случаев в package.json указывается sideEffects массивом файлов, которые нужно сохранить. Также, если библиотека импортируется в каком-то модуле, но этот модуль сам не используется, то библиотека может быть исключена только если весь модуль удалён.
В большинстве случаев неиспользуемая библиотека не попадёт в продакшн-билд, если вы используете современный сборщик и ES-модули. Это помогает уменьшить размер бандла и ускорить загрузку приложения. Однако для надёжности проверяйте настройки сборщика и следите за тем, чтобы библиотеки были совместимы с tree shaking.
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию