首先看一下本文的主要内容：
本文主要介绍源码映射。 源映射是以 .map 结尾的文件，例如 example.min.js.map 和 styles.css.map。 大多数重构工具都可以生成源代码映射文件，例如Vite、webpack、Rollup、Parcel、esbuild等。有些工具默认包含源代码映射，而其他工具则需要额外配置才能生成。
使用源代码映射有助于开发过程中的调试，因为它们提供了一种将压缩、混淆和优化的代码恢复为原始源代码的技术。 这对于诊断和修复错误非常有帮助，尤其是在生产环境中。 源代码映射还可以帮助您确定哪些代码行负责执行特定功能以及从何处调用特定函数。
尽管源代码映射很有用，但它们可以减小文件大小并减少服务器负载。 因此，它们通常在生产环境中禁用，并在开发过程中启用，以便于调试。 如果您使用的创建工具不支持源代码映射，您可能需要自动编译它们。
下面是正文~~~~
今天我们将讨论源代码映射，它是现代 Web 开发中一个特别重要的工具，可以显着简化调试过程。 在本文中，我们将解释源代码映射的基础知识、它们的生成方式以及它们如何增强调试体验。
需要源代码图
回到美好的过去，我们使用纯 HTML、CSS 和 JavaScript 构建 Web 应用程序，并将相同的文件部署到 Web。
然而，当我们今天构建更复杂的 Web 应用程序时，开发工作流程可能涉及使用各种工具。 例如：
这些工具需要创建将我们的代码转换为标准 HTML、JavaScript 和 CSS 的流程，以便浏览器可以理解它。 此外，为了优化性能，这些文件通常会被压缩（例如使用 Terser 来缩小和混淆 JavaScript）并合并，从而减小其大小并使它们更适合 Web。
例如，使用重构工具，我们可以将以下 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"
}
源映射最关键的方面是映射字段。 它使用 VLQ base-64 编码字符串将编译文件中的行和位置映射到相应的原始文件。 可以使用源地图可视化工具（例如 source-map-visualization 和 Source Map Visualization）来可视化该地图。
左侧的“生成”列显示压缩内容，右侧的“原始”列显示原始源。 可视化工具对原始列中的每一行和生成列中的相应代码进行颜色编码。
映射部分显示代码的解码映射。 例如，条目 65->2:2 表示：
浏览器开发工具应用此源映射来帮助我们直接在浏览器中更快地定位调试问题。
该图展示了浏览器开发者工具如何应用源映射，并展示了文件之间的映射关系。
源映射支持扩展。 扩展是以 x_ 命名约定开头的自定义数组。 Chrome DevTools 提出的 x_google_ignoreList 扩展数组就是一个例子。 请参阅 x_google_ignoreList 以了解此扩展程序如何帮助您专注于我们的代码。
这并不完美
在我们的示例中，变量greet在构建期间被优化掉。 该值直接嵌入到最终的字符串输出中。
在这些情况下，当我们调试代码时，开发人员工具可能很难猜测和显示实际值。 除了对浏览器开发工具构成挑战之外，它还使代码监控和分析变得更加困难。
当然，这是一个可以解决的问题。 实现此目的的一种方法是在源映射中包含范围信息以用于调试目的，就像其他编程语言一样。
然而，这需要整个生态系统的共同努力来改进源映射规范和实现。 关于如何通过源映射增强调试性能的讨论非常活跃。
我们期待改进源映射typescript 压缩代码，使调试变得更加容易！
原来的：
最近，我们推出了一款基于GPT引擎的免费AI工具，无需登录即可使用。另外typescript 压缩代码，我们采用了多重加路由转换，答案响应速度超快。 点击阅读原文，体验一下。
如果您有任何疑问，也可以加入客服群提问：
终于：
发表评论