Налагодження JavaScript у production за допомогою Source Maps
Такі інструменти називають транляторами, вони транслюють код з однієї мови іншою.
Тут на допомогу приходять карти коду, або Source Maps.
Sources Maps
Карта коду (source map) - це JSON-файл, який містить інформацію про те, як транслювати код назад у вихідний код.
Приклад карти коду:
Вам, швидше за все, не доведеться створювати ці файли самостійно, але все ж таки варто розібратися, що всередині:
sourceMappingURL
Щоб браузер міг визначити, звідки завантажувати карту коду, в кінці файлу, що транслюється, повинна бути директива sourceMappingURL:
Примітка: браузери завантажують і використовують карти коду тільки при відкритій панелі розробника.
Генерація карт коду
Ок, тепер ми знаємо, як працюють карти коду і як змусити браузер завантажувати і використовувати їх. Але як згенерувати карту коду та зробити посилання на неї у трансльованому файлі?
Хороші новини: практично будь-який сучасний транслятор має опцію для створення карти коду. Давайте розглянемо кілька прикладів.
UglifyJS – це популярний інструмент мініфікації вихідного коду для production-середовища. Він може значно зменшити розмір файлів шляхом усунення прогалин, зміни імен змінних, видалення мертвих гілок коду тощо.
Якщо ви використовуєте UglifyJS, команда нижче додатково створить карту коду:
Якщо подивитися на згенерований файл (app.min.js), можна побачити, що останній рядок містить директиву sourceMappingURL, що вказує на згенеровану картку коду.
Висновок
Карти коду допомагають у налагодженні трансльованого коду в production. Враховуючи, що сучасніінструменти збирання підтримують генерацію карт коду, додавання їх не займе багато часу, але дуже корисно.