微前端中SourceMap需隔离映射与正确路径解析：各子应用独立配置devtool和sourceMapFilename，.map文件须与JS同目录部署或用完整URL，禁止共用模板，生产推荐hidden-source-map并由监控平台上传。
微前端架构中，每个子应用独立构建、独立部署，SourceMap 也必须各自独立生成、独立解析，不能混用或跨域失效。关键不是“统一映射”，而是“隔离映射 + 正确路径解析”。
各子应用单独配置 devtool 和 sourceMapFilename
每个子应用的 Webpack（或 Vite/Rollup）配置需独立启用 SourceMap，且不依赖主应用或共享构建流程：
- Webpack 子应用：设 devtool: 'source-map' 或 'hidden-source-map'，避免用
eval类型（不兼容远程加载） - 输出文件名带 hash，同时显式设置 sourceMapFilename: '[name].[contenthash].js.map'，确保 .map 文件与 JS 文件版本严格对应
- Vite 子应用：在
build.sourcemap设为true，并配合build.sourcemapIgnoreList过滤 node_modules，避免第三方库干扰映射
确保 SourceMap 路径可被子应用自主解析
微前端运行时（如 qiankun、single-spa）加载子应用 JS 后，浏览器需能按需拉取其对应的 .map 文件——这依赖正确的 sourceMappingURL 和静态资源部署结构：
- 子应用构建后，.map 文件必须和 JS 文件同目录部署（例如
https://subapp.example.com/static/js/main.abc123.js对应.../main.abc13.js.map） - 若子应用通过 CDN 或不同域名加载，需在 JS 文件末尾的
//# sourceMappingURL=...中使用完整 URL（如https://cdn.subapp.com/main.abc123.js.map），而非相对路径 - 主应用无需处理子应用的 SourceMap；浏览器 DevTools 会自动按每个 JS 文件自身的注释发起独立请求
避免跨子应用 SourceMap 冲突或泄露
多个子应用共存时，SourceMap 若未隔离，可能相互覆盖或暴露不该公开的路径：
立即学习“Java免费学习笔记（深入）”；
- 禁止所有子应用共用同一份
devtoolModuleFilenameTemplate模板（如全用[absolute-resource-path]），应改为带命名空间的写法，例如webpack://subapp-a/[resource-path] - 生产环境推荐用 hidden-source-map：生成 .map 文件但不写 sourceMappingURL 注释，再由监控平台（如 Sentry）按子应用名称+版本号上传对应 map，实现精准反解而不暴露路径
- Nginx 或 CDN 层对
/*.map请求做子域名级拦截（如只允许subapp-a.example.com/*.map，拒绝subapp-b.example.com的跨域请求）
调试时手动加载或验证映射有效性
微前端下 DevTools 可能无法自动关联源码，尤其当子应用动态挂载或路径别名复杂时：
- 打开 Sources 面板 → 右键空白处 → “Add folder to workspace”，把本地子应用源码目录拖入，再刷新页面，DevTools 会尝试自动映射
- 若失败，可右键压缩 JS 文件 → “Map to file system resource”，手动指定本地源码路径（适用于本地联调）
- 检查 Network 面板：每个子应用 JS 加载后，应有且仅有一个对应 .map 的 200 请求；404 表示路径错，403 表示服务端拦截生效，302 表示重定向异常
