Source Map 生成策略
Source Map 用于调试,将压缩代码映射回源码位置。
配置选项
JavaScript
export default defineConfig({
build: {
sourcemap: false // 不生成(默认)
}
})
| 选项值 | 说明 | |
|---|---|---|
| false | 不生成 source map | |
| true | 生成独立 .map 文件 | |
| 'inline' | 内联到文件中 | |
| 'hidden' | 生成但不关联 |
生成独立文件
JavaScript
export default defineConfig({
build: {
sourcemap: true
}
})
构建输出:
JavaScript
dist/
├── index-abc.js
├── index-abc.js.map
内联 Source Map
JavaScript
export default defineConfig({
build: {
sourcemap: 'inline'
}
})
source map 内联到 JS 文件末尾,不生成独立文件。
注意:内联方式会增加 JS 文件体积。
Hidden Source Map
JavaScript
export default defineConfig({
build: {
sourcemap: 'hidden'
}
})
生成 .map 文件但不添加映射链接,用于错误上报分析。
Source Map 作用
| 场景 | 推荐配置 | |
|---|---|---|
| 生产部署 | false 或 hidden | |
| 开发调试 | true 或 inline | |
| 错误监控 | hidden |
体积影响
| 配置 | 体积增加 | |
|---|---|---|
| false | 无 | |
| true | +.map 文件 | |
| inline | JS 文件增大 | |
| hidden | +.map 文件 |
开发环境 Source Map
开发环境默认支持 source map,无需配置:
text
export default defineConfig({
server: {
// 开发环境已支持
}
})
要点总结
- sourcemap 控制源映射生成
- true 生成独立 .map 文件
- inline 内联到文件中
- hidden 生成但不关联,用于监控
📝 发现内容有误?点击此处直接编辑