Source Map представляет собой механизм сопоставления итогового
(скомпилированного) JavaScript-кода с исходными файлами проекта. При
сборке Webpack код часто объединяется, минифицируется, транспилируется
(Babel, TypeScript), из-за чего исходная структура теряется. Source Map
решает эту проблему, позволяя отладчику браузера отображать оригинальный
код вместо сгенерированного.
Каждая стратегия генерации Source Map в Webpack представляет собой
комбинацию модификаторов, влияющих на качество карты, скорость сборки и
уровень доступной информации.
eval Source Maps
eval
Использование eval в Source Map-режиме означает, что
каждый модуль оборачивается в функцию eval, внутри которой
присутствует специальная строка с sourceURL.
Пример поведения:
- каждый модуль превращается в
eval("code //# sourceURL=...")
- карта источников не создаётся в полноценном виде
- отладка происходит через привязку sourceURL
Особенности eval
- максимальная скорость сборки
- отсутствие полноценного .map файла
- ограниченная точность отображения исходного кода
- поддержка горячей перезагрузки (HMR) работает быстрее
eval-source-map
Комбинация eval и полноценной Source Map:
- создаёт отдельные Source Map для каждого модуля
- внедряет их через eval
- обеспечивает высокую точность соответствия строк
Особенности:
- высокая точность отображения исходников
- медленнее, чем чистый eval
- подходит для development при необходимости точной отладки
inline Source Maps
inline-source-map
Inline-режим встраивает Source Map непосредственно в итоговый
JavaScript-файл в виде base64-кодированной строки.
Структура:
- исходный код
- встроенная карта внутри файла
(
data:application/json;base64,...)
Характеристики inline
- отсутствует внешний .map файл
- упрощённое распространение (один файл содержит всё)
- значительное увеличение размера bundle
- медленная работа на больших проектах
inline-cheap-source-map
Комбинация упрощённого сопоставления и встроенной карты:
- отсутствуют колонки (только строки)
- быстрее генерация
- ниже точность отладки
cheap Source Maps
cheap-source-map
Режим, при котором:
- сопоставление идёт только по строкам
- игнорируются колонны символов
- не учитываются loader transformations
Особенности cheap
- ускоренная генерация Source Map
- меньший размер карты
- менее точная отладка (невозможно точно попасть в выражение внутри
строки)
cheap-module-source-map
Расширенная версия cheap:
- учитывает loader’ы (Babel, TypeScript)
- отображает оригинальные модули, а не только итоговый bundle
- сохраняет быстрый build time
Ключевые характеристики:
- баланс скорости и точности
- корректная работа с трансформированными исходниками
- подходит для большинства development-сценариев
module Source Maps
module-source-map
Режим, в котором Webpack сохраняет информацию о модулях до всех
трансформаций.
Особенности:
- учитываются исходные файлы до обработки loader’ами
- корректно отображаются TypeScript, JSX, SCSS до компиляции
- высокая точность отображения структуры проекта
cheap-module-source-map
Комбинированный режим:
- учитывает модули (module)
- упрощает сопоставление (cheap)
- игнорирует колонны
Характеристика:
- оптимальный баланс производительности и качества
- часто используется в development-конфигурациях
- минимальная нагрузка по сравнению с full source-map
hidden Source Maps
hidden-source-map
В этом режиме Source Map создаётся, но не прикрепляется к итоговому
JavaScript-файлу.
Особенности:
- .map файл существует, но не указывается в
//# sourceMappingURL
- браузер не загружает карту автоматически
- карта доступна только при ручной загрузке
Применение hidden
- продакшен-сборки с необходимостью анализа ошибок
- использование с системами мониторинга (Sentry, Rollbar)
- защита исходного кода от прямого раскрытия
Отличие от source-map
- source-map: карта доступна браузеру
- hidden-source-map: карта скрыта, но существует
nosources Source Maps
nosources-source-map
Режим, при котором:
- Source Map содержит структуру файлов и строк
- исходный код не включается в карту
Особенности nosources
- невозможно увидеть оригинальный код через DevTools
- сохраняется возможность определить место ошибки
- минимизация утечки исходников
- отображаются имена файлов и номера строк
- содержимое функций скрыто
- stack trace остаётся полезным, но ограниченным
Сравнительный анализ
типов Source Maps
Скорость сборки
- fastest: eval, cheap
- medium: cheap-module, module
- slow: source-map, inline-source-map, eval-source-map
Точность отладки
- максимальная: source-map, eval-source-map, module-source-map
- средняя: cheap-module-source-map
- низкая: cheap-source-map, eval
Размер bundle
- минимальный: cheap-source-map
- средний: module-source-map
- максимальный: inline-source-map
Уровень безопасности
- низкий риск утечки: nosources-source-map, hidden-source-map
- высокий риск: source-map, inline-source-map
Практическая логика выбора
режимов
В Webpack конфигурациях выбор типа Source Map напрямую влияет на
баланс между производительностью и удобством отладки.
Для разработки характерны режимы с высокой точностью и допустимой
нагрузкой на сборку. Для production приоритет смещается в сторону
скрытия исходного кода и минимизации размера выходных файлов.
Каждый тип Source Map представляет собой отдельную стратегию
компромисса между следующими параметрами:
- скорость компиляции
- точность отображения исходного кода
- размер артефактов сборки
- уровень раскрытия исходников
Комбинации модификаторов eval, inline, cheap, module, hidden и
nosources позволяют точно настраивать поведение сборки под конкретные
требования проекта и этап разработки.