cheap-module-source-map 是 webpack 开发阶段兼顾构建速度与调试可用性的折中方案：忽略列精度、保留原始源码行列映射、生成精简 .map 文件，适合本地开发与 ci 测试，但不推荐用于生产环境。
在开发阶段，cheap-module-source-map 是 Webpack 中一个被广泛采用的折中方案——它不追求全量映射精度，但显著加快构建速度，同时保留足够支撑日常调试的行列信息。
为什么 cheap-module-source-map 能兼顾速度与可用性
它的名字就揭示了设计逻辑：“cheap” 指忽略列级精度，“module” 表示保留 loader 处理前的源码位置（比如 .vue 或 .ts 文件），而非仅 webpack 内部模块路径。“source-map” 说明仍生成标准 .map 文件。这意味着：
- 构建时跳过列号计算和 sourceContent 冗余嵌入，节省约 20%~40% 的打包时间
- 报错堆栈能准确定位到原始文件的某一行（例如
src/views/User.vue:87），满足绝大多数逻辑排查需求 - DevTools 的 Sources 面板可展开原始文件结构，支持单步调试、变量查看，只是断点可能无法精确落到某列字符上
实际配置与效果对比
在 webpack.config.js 或 vue.config.js 中设置：
module.exports = {
devtool: 'cheap-module-source-map'
};
相比 source-map：
- 生成的 .map 文件体积更小，无
sourcesContent字段，不内嵌源码 - 不记录 loader（如 Babel、Vue-loader）转换过程中的中间层，直接映射回你写的 .js/.ts 文件
- 错误堆栈里显示的是真实源码行号，不是 webpack runtime 或 polyfill 行号
适用场景与注意事项
这个模式特别适合中大型 Vue/React 项目在本地开发或 CI 构建测试环境使用：
- 团队协作开发时，成员无需等待完整 source-map 生成即可启动热更新
- 配合 HMR，修改后重新编译快，且断点基本不漂移
- 不推荐用于生产环境：它仍会在 JS 文件末尾写入
//# sourceMappingURL=xxx.map，导致 .map 文件被浏览器自动请求，带来额外网络开销和潜在泄露风险
进阶优化建议
若想进一步提速，可搭配以下调整：
- 关闭非必要 loader 的 source map 输出，例如在 Babel 配置中设
sourceMaps: false - 对 node_modules 中的依赖禁用解析，避免为第三方库生成映射（Webpack 默认已处理）
- 开发服务器启用缓存，如
cache: { type: 'filesystem' }，让重复构建复用 cheap 模式下的 mapping 结果
