Карта кода в Vite

Карта кода связывает собранный файл с исходным модулем.

После минификации и объединения модулей в браузере виден один длинный файл. Инструменты разработчика могут показать исходный src/main.js, если рядом лежит карта. Для продакшена карту включают только когда она действительно нужна: файл карты увеличивает объём и может раскрыть структуру проекта.

В блоке build зададим поле sourcemap со значением true:

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    sourcemap: true,
  },
})

Исходный модуль оставим простым:

document.querySelector('#app').textContent = 'hello'

Выполним сборку:

npm run build

В dist/assets рядом с JavaScript-файлом с хешем в имени появится второй файл с тем же основным именем и расширением .map. В index.html у скрипта может быть комментарий со ссылкой на эту карту. Открывать содержимое карты не обязательно: достаточно знать, что она связывает строки собранного файла с исходным модулем в src.

Включите карту кода, соберите проект со словом hello и найдите в dist/assets пару файлов: скрипт и соседний .map с похожим именем.

Отключите карту кода, очистите dist, соберите проект снова и проверьте, что файлов .map в каталоге ассетов больше нет.