早期的 Web 應用的復雜性較低。開發者直接將 HTML、CSS 和 JavaScript 文件部署到 Web 上。

在開發工作流中，更現代、更復雜的 Web 應用可能需要使用各種工具。例如：

1.模板語言和 HTML 預處理器：Pug、Nunjucks、Markdown。2.CSS 預處理器：SCSS、LESS、PostCSS。3.JavaScript 框架：Angular、React、Vue、Svelte。4.JavaScript 元框架：Next.js、Nuxt、Astro。5.高級編程語言：TypeScript、Dart、CoffeeScript。

這些工具需要構建流程來將您的代碼轉譯為瀏覽器可以理解的標準 HTML、JavaScript 和 CSS。常見做法還包括使用 Terser^[1] 等工具縮減和合并這些文件，以優化性能。

例如，使用構建工具，我們可以將以下 TypeScript 文件轉譯并壓縮為一行 JavaScript。

/* A TypeScript demo: example.ts */
document.querySelector('button')?.addEventListener('click', () => {  const num: number = Math.floor(Math.random() * 101);  const greet: string = 'Hello';  (document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;  console.log(num);});

壓縮后的版本將如下所示：

/* A compressed JavaScript version of the TypeScript demo: example.min.js  */
document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));

不過，壓縮代碼可能會使調試變得更加困難。源映射可以解決此問題：通過將編譯后的代碼映射回原始代碼，源映射可以幫助您快速找到錯誤的來源。

生成源映射

源映射是名稱以 .map 結尾的文件（例如 example.min.js.map 和 styles.css.map）。大多數構建工具（包括 Vite、webpack、Rollup、Parcel 和 esbuild）都可以生成源映射。

某些工具默認包含源代碼映射。其他工具可能需要進行額外的配置才能生成：

/* Example configuration: vite.config.js *//* https://vitejs.dev/config/ */
export default defineConfig({  build: {    sourcemap: true, // enable production source maps  },  css: {    devSourcemap: true // enable CSS source maps during development  }})

了解源映射

為了幫助調試，這些源映射文件包含有關編譯代碼如何映射到原始代碼的重要信息。以下是源映射示例：

{  "mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",  "sources": ["src/script.ts"],  "sourcesContent": ["document.querySelector('button')..."],  "names": ["document","querySelector", ...],  "version": 3,  "file": "example.min.js.map"}

如需了解其中每個字段，您可以參閱源代碼映射規范^[2]。

源映射最重要的部分是 mappings 字段。它使用 VLQ base 64 編碼字符串^[3]將編譯文件中的行和位置映射到相應的原始文件。您可以使用源代碼映射可視化工具（例如 source-map-visualization^[4] 或 Source Map Visualization）查看此映射。

左側的生成列顯示壓縮內容，原始列顯示原始來源。

可視化工具會為 original 列中的每行分配顏色代碼，并在 generated 列中顯示相應的代碼。

映射部分會顯示代碼的已解碼映射。例如，條目 65 -> 2:2 表示：

1.生成的代碼：const 一詞位于壓縮內容的 65 位。2.原始代碼：const 一詞位于原始內容的第 2 行和第 2 列。

這樣，開發者就可以快速確定經過縮減的代碼與原始代碼之間的關系，從而使調試過程更加順暢。

瀏覽器開發者工具會應用這些源代碼映射，以幫助您在瀏覽器中快速查明調試問題。

References

[1] Terser: https://github.com/terser/terser
[2] 源代碼映射規范: https://bit.ly/sourcemap
[3] VLQ base 64 編碼字符串: https://developer.chrome.com/blog/sourcemaps?hl=zh-cn#base64-vlq-and-keeping-the-source-map-small
[4] source-map-visualization: https://sokra.github.io/source-map-visualization/

什么是源代碼映射？