소스맵 정리

내용 정리 배경

현재 사내에서 Svelte로 진행하고 있는 프로젝트가 있는데, dynamic route 에서의 작업 도중 params값에 .map.css text가 담기는 이슈를 확인하였다. 더군다나 브라우저 devtools를 켰을 때만 해당 이슈가 발생하였는데 확인해보니 vite 및 소스맵 관련 이슈였고, 이로 인해 새로 알게된 소스맵에 대해 간단하게 정리해보았다.

소스맵이란?

소스맵(source map)은 원본 소스 코드 파일과, 변환된 소스 코드 사이의 매핑 정보가 선언된 파일이다. 주로 JS나 CSS와 같은 파일들의 경우, 실제 프로덕트를 배포하기 위해 빌드 진행시 파일들이 압축된다. 이때 압축한 파일에서 에러가 났을때 압축한 파일들만 가지고는 디버깅이 어려워지므로, 원본 소스 코드를 찾을 수 있도록 매핑 정보를 제공하도록 도와주는 역할을 한다.

vite에서의 적용

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: [sveltekit()],
  css: {
    devSourcemap: true, // dev mode에서 css 소스맵 확인 유무에 따른 boolean값 지정
  },
  build: {
    sourcemap: true, // 빌드시 소스맵 확인 유무에 따른 boolean값 지정
  },
});

빌드 후 .svelte-kit 내부 js.map 파일 확인

{
  "version": 3,
  "file": "createImagesQuery.js",
  "sources": [
    "../../../../node_modules/@tanstack/svelte-query/build/lib/useQueryClient.js",
    "../../../../node_modules/@tanstack/svelte-query/build/lib/createBaseQuery.js",
    "../../../../node_modules/@tanstack/svelte-query/build/lib/createQuery.js",
    "../../../../src/routes/queries/createImagesQuery.ts ..."
  ],
  "sourcesContent": ["import { getQueryClientContext } from './context';..."],
  "mappings": ";;;;AACO..."
}

sourcemap 옵션을 true로 준 후, 빌드 후에 위와 같이 소스맵 파일이 생기는데, 각각의 프로퍼티의 값은 다음과 같다.

• version: 소스맵의 버전 (양수만 가능)
• file: 변환된 파일명
• sources: mappings에서 사용할 원본 소스 파일명
• sourceContent: 옵션값, 원본 코드가 있는 소스 파일을 가져오지 못할경우 사용되는 값들
• mappings: 인코딩된 매핑 데이터 리스트 (base 64 VLQ로 인코딩)

실제 확인

build시 소스맵 활성화가 되었을때

 

build시 소스맵이 비활성화가 되었을때

---

 

References

• 소스 맵의 동작 원리는 무엇일까? - 요즘 IT
• What are source maps?