Основы сборки: tree shaking и разделение кода
Разберитесь, как сборщики удаляют неиспользуемые экспорты с помощью tree shaking и разделяют результат на фрагменты для ускорения начальной загрузки страницы.
«Основы сборки: tree shaking и разделение кода» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что делает сборщик
Сборщик (Vite, webpack, Rollup, Parcel) читает исходные файлы, разрешает импорты, преобразует код (транспилирует, минифицирует, оптимизирует) и создаёт файлы, которые браузер может эффективно загрузить.
Граф модулей
Сборщик начинает с точки входа и проходит по каждому импорту, создавая граф модулей — полную карту всего кода, который использует ваше приложение. Этот граф служит основой для всех оптимизаций.
Удаление неиспользуемого кода
Удаление неиспользуемого кода анализирует граф модулей и удаляет экспорты, которые нигде не импортируются. Только статические импорты ES-модулей позволяют выполнять такое удаление — require() в CommonJS является динамическим и не может быть статически проанализирован.
// utils.js
export const add = (a, b) => a + b; // used → included
export const multiply = (a, b) => a * b; // never imported → removed
// app.js
import { add } from './utils.js';
console.log(add(2, 3));Побочные эффекты и sideEffects: false
Если ваша библиотека не имеет побочных эффектов (только чистые реэкспорты), добавьте "sideEffects": false в package.json. Это сообщает сборщикам, что они могут безопасно удалить любой файл из вашего пакета, который не импортируется.
// package.json of a library:
{
"sideEffects": false
// or list files with side effects:
"sideEffects": ["./src/polyfills.js"]
}Разбиение кода
Разбиение кода делит бандл на несколько чанков, загружаемых по требованию. Основной чанк остаётся небольшим, что ускоряет первоначальную загрузку. Дополнительные чанки загружаются только при необходимости (отложенные маршруты, переключатели функций).
Разбиение по точкам входа
Многостраничные приложения имеют несколько точек входа, и для каждой создаётся собственный бандл. Общий код (например, React) автоматически выносится в общий чанк.
Разбиение по динамическим импортам
Каждый вызов import() создаёт точку разделения. Сборщик создаёт отдельный чанк для модуля с отложенной загрузкой и всех его уникальных зависимостей.
// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));Формирование чанков зависимостей
Код из node_modules редко меняется. Выделите его в чанк зависимостей с длительным сроком хранения в кэше TTL. Пользователям, у которых этот чанк уже сохранён в кэше, при обновлениях нужно будет загрузить только чанк приложения.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] }
}
}
}Минификация
Минификаторы (esbuild, terser) удаляют пробелы, переименовывают переменные в однобуквенные имена и применяют другие сокращения. После минификации типичное приложение React уменьшается на 60–70%.
Хеширование на основе содержимого
Сборщики добавляют хеш содержимого файла к его имени: index-a1b2c3.js. Когда содержимое изменяется, изменяются хеш и имя файла, и браузер загружает новый файл. Неизменившиеся чанки можно хранить в кэше неограниченно долго.
Карты исходного кода
Карты исходного кода связывают минифицированный результат с исходным кодом. Они создаются отдельно (пользователям не отправляются) и используются DevTools для отладки. Включите их с помощью build.sourcemap: true.
Быстрая проверка
Какое основное требование необходимо для удаления неиспользуемого кода?
Итоги: концепции сборки
Сборщики разрешают граф модулей, удаляют неиспользуемые экспорты (для этого нужен статический ESM), разбивают код на чанки для отложенной загрузки, выносят код зависимостей для кэширования, минифицируют результат и добавляют хеши содержимого для обновления кэша. Карты исходного кода позволяют отлаживать минифицированный код.
Часто задаваемые вопросы
Урок «Основы сборки: tree shaking и разделение кода» бесплатный?
Да — полный текст урока «Основы сборки: tree shaking и разделение кода» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Основы сборки: tree shaking и разделение кода»?
Разберитесь, как сборщики удаляют неиспользуемые экспорты с помощью tree shaking и разделяют результат на фрагменты для ускорения начальной загрузки страницы. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Основы сборки: tree shaking и разделение кода»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- ES-модули: import, export и динамический import
- npm и package.json: зависимости и скрипты
- Vite: сервер разработки и сборка
- Основы сборки: tree shaking и разделение кода