Почему встроенные исходные карты?
Сегодня я узнал, что исходные карты можно включать непосредственно в минимизированный файл JavaScript, а не в отдельный файл example.min.map. Интересно: зачем кому-то делать что-то подобное?
Преимущество наличия исходных карт для меня очевидно: например, можно отлаживать ошибки с исходными несжатыми исходными файлами во время работы минимизированных файлов. Преимущество минимизации также очевидно: размер исходных файлов значительно сокращается, что ускоряет загрузку браузерами.
Так почему же я хотел бы включить исходные карты в минимизированный файл, учитывая, что карты имеют размер даже больше, чем сам минимизированный код?
7 ответов
Я искал вокруг, и единственная причина, по которой я мог видеть, что встроенные исходные карты людей - это использование в разработке. Встроенные исходные карты не должны использоваться в производстве.
Рациональным для встраивания исходных карт в ваши уменьшенные файлы является то, что браузер анализирует один и тот же JavaScript при разработке и производстве. Некоторые минификаторы, такие как Closure Compiler, делают больше, чем просто минимизируют код. Используя расширенные опции, он также может выполнять такие действия, как удаление мертвого кода, встраивание функций или агрессивное переименование переменных. Это делает минимизированный код (потенциально) функционально отличным от исходного файла.
Конечно, это все еще можно сделать, ссылаясь на файлы внешних карт, но некоторые люди, похоже, предпочитают встраивание для процесса сборки.
Если вы выполняете удаленную отладку Chrome на устройстве Android, отладчик Chrome не может просто получить доступ к любому файлу на устройстве, который включает в себя отдельные файлы карт. Если вы включите их в строку, у вас нет этой проблемы.
JS комплектующие инструменты, такие как Browserify или же Webpack свяжет все ваши .js файлы вводят один или несколько пакетов, даже в режиме разработки. Поэтому в этом случае добавление встроенной исходной карты в сгенерированные пакеты - это самый простой способ помочь отладке без дополнительных файлов.
В некоторых ситуациях вы можете захотеть включить встроенные исходные карты в проверенный код. Например, у вас есть поле ввода coffeescript и вы хотите включить отладку кода в coffeescript. Существует вопрос переполнения стека об исходных картах в проверенном коде:
Получение исходных карт, работающих с оцененным кодом
Вы можете включить @sourceURL в свои комментарии, чтобы указать URL своего кода eval и загрузить файл карты (см. Стр. 8 в SourceMap Spec 3). Но не всегда возможно записать файлы в какое-то место.
Если вы разрабатываете расширение для браузера, inline-source-map - единственный вариант для отладки, поскольку само расширение не может получить доступ к файлам исходной карты - даже если это возможно, вам нужно указать все свои файлы исходной карты внутри manifest.json(файл конфигурации для расширений браузера).
cheap-module-source-map намного лучше для сборки производства.
inline-source-map используется для быстрой и грязной сборки при тестировании
Вариант использования (для меня) — это среды без браузера, где исходные карты не поддерживаются (или вообще не поддерживаются, отсюда и необходимость в веб-пакете).
Или, другими словами, вебпак без интернета.