Оба сокращают JavaScript, который скачивают пользователи. Code splitting разбивает bundle на чанки, загружаемые по требованию; tree shaking удаляет код, который вы никогда не используете. Они дополняют друг друга: разделяйте, что загружается, вытряхивайте мёртвый код внутри каждого чанка.
Вместо одного большого bundle приложение разделяется так, что каждый маршрут или тяжёлая функция становится отдельным чанком, загружаемым только когда нужно:
// Разделение по маршрутам: код dashboard не скачивается, пока вы его не посетите
const Dashboard = lazy(() => import("./routes/Dashboard")); // собственный чанк
// Разделение по компонентам: тяжёлый редактор загружается при взаимодействии
button.onclick = async () => {
const { openEditor } = await import("./editor"); // загружается по клику
openEditor();
};
Динамический import() — это сигнал: сборщик выдаёт отдельный файл на этой границе.
Сборщик статически анализирует import/export ES-модулей и отбрасывает экспорты, на которые ничто не ссылается. Это работает только с ESM (статический, анализируемый) — не с CommonJS require:
import { debounce } from "utils"; // сохраняется только debounce; throttle и т.д. вытряхиваются
Он опирается на "sideEffects": false в package.json и импорты отдельных функций; barrel-файлы или модули с побочными эффектами могут его сломать.
Это два рычага за принципом «отправляй меньше JS». Интервьюеры хотят, чтобы вы знали: code splitting решает, что загружается и когда, tree shaking решает, что вообще внутри, и что tree shaking зависит от статического ESM — деталь, которая отличает тех, кто действительно настраивал bundle, от тех, кто только читал об этом.
Библиотека вопросов для IT-собеседований с подробными ответами — от Junior до Senior.
Поддержать