Source Map

认识Source Map

在前端开发中，代码的压缩与混淆是提升网页性能的常见做法。然而，这种优化措施也带来了调试难度的增加，因为压缩后的代码往往难以阅读和理解。这时，Source Map 技术应运而生，作为连接源代码和构建后代码的桥梁，它极大地提升了调试效率和错误追踪的准确性。

我们的代码通常运行在浏览器上时，是通过打包压缩的：而真实跑在浏览器上的代码，和我们编写的代码其实是有差异的

比如ES6的代码可能被转换成ES5；

比如对应的代码行号、列号在经过编译后肯定会不一致；

比如代码进行丑化压缩时，会将编码名称等修改；

比如我们使用了TypeScript等方式编写的代码，最终转换成JavaScript；

• Source Map 是一种映射文件，它将压缩、混淆后的代码还原回其原始的源代码。该文件包含了压缩前和压缩后的代码的位置，可以帮助我们去定位代码的真实位置。

使用Source Map

Devtool | webpack 中文文档

1. 使用 Webpack

在 webpack.config.js 中配置：

module.exports = {
  devtool: 'source-map', // 生成完整的source map
  // 其他配置...
};

常用 devtool 选项：

• source-map：生成独立的 .map 文件
• eval-source-map：将 source map 以DataUrl添加到eval函数的后面
• cheap-module-source-map：生成不带列映射的 source map 更加高效一些（cheap低开销）
• hidden-source-map：生成但不引用 source map;相当于删除了打包文件中对sourcemap的引用注释
• inline-source-map：会生成sourcemap，但是source-map是以DataUrl添加到bundle文件的后面

2. 使用 Vite

在 vite.config.js 中配置：

export default defineConfig({
  build: {
    sourcemap: true, // 或 'inline'、'hidden'
  }
});

下面几个值不会生成source-map

1. false：不使用source-map，也就是没有任何和source-map相关的内容。
2. inline：在开发时生成内联 source map（包含在输出文件中）
3. none：production模式下的默认值（什么值都不写） ，不生成source-map。
4. eval：development模式下的默认值，不生成source-map
5. source-map：生成一个独立的source-map文件，并且在bundle文件中有一个注释，指向source-map文件；