Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про Webpack: source-map, devtool

Чем отличаются обычные исходные карты от дешевых исходных карт в Webpack?

Этот вопрос проверяет понимание различий между типами исходных карт (source maps) и их влияния на производительность сборки и отладку кода.

Короткий ответ

Обычные исходные карты (source-map) дают точное сопоставление между исходным кодом и сгенерированным, но замедляют сборку. Дешевые исходные карты (cheap-source-map) работают быстрее, но менее точны, поскольку игнорируют информацию о колонках и преобразованиях на уровне кода (например, в Babel).

Длинный ответ

Исходные карты помогают отладить сгенерированный код, отображая ошибки в контексте исходного кода. Webpack поддерживает разные типы исходных карт, которые отличаются точностью и скоростью сборки:

Обычные исходные карты (source-map):
Подробные карты, которые включают информацию о строках и колонках. Они удобны для точной отладки, но значительно замедляют процесс сборки.

Дешевые исходные карты (cheap-source-map):
Сокращают время сборки, пропуская информацию о колонках и трансформациях (например, Babel). Используются для более быстрой отладки, но могут быть менее точными.

Пример настройки:

module.exports = {
  	devtool: 'source-map', // Или 'cheap-source-map'
};

Выбор типа исходной карты зависит от того, что вам важнее: точность отладки или скорость сборки.

Уровень

  • Рейтинг:

    3

  • Сложность:

    5

Навыки

  • Webpack

    Webpack

Ключевые слова

#source-map

#devtool

Подпишись на React Developer в телеграм