cheap-source-map 是放弃列映射、仅保留行级映射的取舍策略，不记录列偏移、不处理 loader 和第三方库映射，JSON 体积减小 60%～80%，适用于快速验证逻辑错误或热更新敏感的大型项目。
cheap-source-map 的设计逻辑就是放弃列映射（column mapping），只保留行级映射（line mapping），从而显著减少 Source Map 文件体积和生成耗时。它不“忽略”列信息，而是压根不计算、不记录——这是明确的取舍策略，不是 bug 或配置失误。
cheap-source-map 为什么只定位到行
- 映射粒度被简化：它只建立压缩后代码每一行与源码对应行的映射，不追踪该行内具体哪个字符（即列号）出错；
- 跳过 loader 和第三方库映射：不会尝试还原 babel、ts-loader、css-loader 等处理过程，也不映射 node_modules 里的代码，进一步降低复杂度；
-
不生成完整 AST 路径：省略了 source、name（变量名）、mappings 中的 VLQ 列偏移量等字段，JSON 体积通常比
source-map小 60%～80%。
实际影响举例
假设源码有这样一行：
console.log('a', b + c, { x: 1 });编译压缩后变成一行：
console.log("a",b+c,{x:1});若 b 是未定义变量，报错堆栈显示在压缩后代码第 123 行 —— cheap-source-map 能准确告诉你这对应源码第 45 行，但无法指出是 b 还是 c 出问题，因为没记录列偏移。
如何在 webpack 中启用并确认效果
只需配置：
module.exports = {
mode: 'development',
devtool: 'cheap-source-map'
};构建后你会看到：
- 生成
xxx.js.map文件（非 inline）； -
.map文件中mappings字段形如AAAA;BAAA;CAAA（只有行跳转，无列增量）； - 浏览器 DevTools 的 Sources 面板里，只能跳转到某一行，断点打在行首，拖动无效（无法精准打到某个变量或操作符上）。
它适合什么场景
- 开发阶段快速验证逻辑错误（比如
undefined is not a function明显是某函数调用失败）； - 大型项目对热更新速度敏感，又不需要精细调试（如 UI 组件层改动频繁但逻辑简单）；
- CI 构建中做基础错误拦截（配合 ESLint + 类型检查，列级精度非必需）。
不适用于：
- 需要单步调试异步链路或复杂表达式；
- TypeScript 项目中依赖列定位查类型推导问题；
- 混淆后代码需精确还原变量名（它不包含 names 字段）。
本质上，cheap-source-map 是用调试精度换构建速度的务实方案。
