Sourcemap 完全指南

// src/utils/calculator.js
export function add(a, b) {
  console.log('Adding numbers:', a, b);
  return a + b;
}

export function multiply(a, b) {
  console.log('Multiplying numbers:', a, b);
  return a * b;
}

// dist/assets/calculator-a1b2c3d4.js
function t(n,r){return console.log("Adding numbers:",n,r),n+r}function e(n,r){return console.log("Multiplying numbers:",n,r),n*r}export{t as add,e as multiply};

const t=e=>({user:e}),n=e=>`Hello, ${e.user.name}! You are ${e.user.age} years old.`;

// 生产环境报错
Uncaught TypeError: Cannot read property 'name' of undefined
  at n (vendor-vue-e5f6g7h8.js:1:2345)

// 浏览器自动映射到原始位置
Uncaught TypeError: Cannot read property 'name' of undefined
  at UserCard.vue:15:23
  at computed (vue.js:1234)

// src/utils.js (第 3 行，第 10 列)
function add(a, b) {
  return a + b;
}

// dist/utils.js (第 1 行，第 15 列)
function t(n,r){return n+r}

// 原始代码
const greeting = `Hello, ${name}!`;
//    ↑        ↑  ↑      ↑  ↑    ↑
//    列1      列6 列9    列17 列22 列24

// 转换后代码
const t=`Hello, ${n}!`;
//    ↑ ↑ ↑      ↑ ↑ ↑
//    列1 列7 列9  列17 列19 列21

// Sourcemap 记录每个 token 的映射
(1, 1)  → (1, 1)   // const
(1, 7)  → (1, 6)   // greeting → t
(1, 9)  → (1, 9)   // `Hello,
(1, 17) → (1, 17)  // ${
(1, 19) → (1, 22)  // name → n
(1, 21) → (1, 24)  // }!`

// vite.config.js
export default {
  build: {
    sourcemap: true,  // 配置 sourcemap 生成
  }
}

// dist/assets/index-a1b2c3d4.js
function t(n,r){return n+r}
// 文件末尾没有 sourceMappingURL 注释

// dist/assets/index-a1b2c3d4.js
function t(n,r){return n+r}
//# sourceMappingURL=index-a1b2c3d4.js.map  // ← 添加了注释

// dist/assets/index-a1b2c3d4.js
function t(n,r){return n+r}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9tYWluLmpzIl0sIm5hbWVzIjpbImFkZCIsImEiLCJiIl0sIm1hcHBpbmdzIjoiQUFBQSxTQUFTQSxFQUFUQyxFQUFXQyxHQUFYLE9BQW9CRCxFQUFJQyJ9

// dist/assets/index-a1b2c3d4.js
function t(n,r){return n+r}
// 文件末尾没有 sourceMappingURL 注释 ← 关键区别

// vite.config.mjs
export default {
  build: {
    sourcemap: 'hidden',  // 使用 hidden 模式
  }
}

eval("function add(a, b) {\n  return a + b;\n}\n//# sourceURL=webpack:///src/utils.js");

// 原始代码（第 3 行）
const greeting = `Hello, ${name}!`;

// 转换后代码（第 1 行）
const t=`Hello, ${n}!`;

// cheap-source-map 映射
转换后第 1 行 → 原始第 3 行（不记录列号）

// 原始 TypeScript 代码
const greeting: string = `Hello, ${name}!`;

// 经过 ts-loader 转换
const greeting = `Hello, ${name}!`;

// 经过压缩
const t=`Hello, ${n}!`;

// cheap-module-source-map 可以映射回原始 TS 代码

// 精确到列的映射
原始位置 (3, 10) → 转换后位置 (1, 15)
原始位置 (3, 22) → 转换后位置 (1, 19)

// 构建配置
{
  devtool: 'hidden-source-map'  // Webpack
  // 或
  sourcemap: 'hidden'  // Vite
}

// 生成的 JS 文件（无注释）
function t(n,r){return n+r}
// 文件末尾没有 //# sourceMappingURL

// 但会生成 .map 文件
// index.js.map 存在，可以上传到 Sentry

// vite.config.js
export default {
  build: {
    sourcemap: true,  // Vite 开发环境默认已启用 sourcemap
  }
}

// vite.config.js
export default {
  build: {
    sourcemap: 'hidden',  // 推荐
  }
}

// vite.config.js
export default {
  build: {
    sourcemap: false,  // 完全不生成
  }
}

// 原始代码
function add(a, b) {
  return a + b;
}

// 压缩后
function t(n,r){return n+r}

// names 数组
["add", "a", "b"]

// 映射关系
t → add (names[0])
n → a   (names[1])
r → b   (names[2])

// 原始代码（2 行）
function add(a, b) {
  return a + b;
}

// 压缩后代码（1 行）
function t(n,r){return n+r}

// mappings 字段
"AAAA,SAASA,EAATC,EAAWC,GAAX,CAAe,OAAOD,EAAIC"
//    ↑     ↑     ↑     ↑     ↑       ↑      ↑
//    |     |     |     |     |       |      |
//  function  add   (    a     ,       b      )

// vite.config.js
export default {
  build: {
    sourcemap: false
  }
}

// vite.config.js
export default {
  build: {
    sourcemap: 'hidden'  // 生成但不添加引用
  }
}

// vite.config.js
export default {
  build: {
    sourcemap: true  // 生成并添加引用
  }
}

// vite.config.mjs
export default {
  build: {
    sourcemap: 'hidden',
  }
}

// vite/plugins/sourcemap-output-filter.js
export default function createSourcemapOutputFilter() {
  return {
    name: 'sourcemap-output-filter',
    apply: 'build',
    enforce: 'post',

    generateBundle(outputOptions, bundle) {
      // 定义需要排除的 chunk 模式
      const excludePatterns = [
        /^vendor-/,        // 所有 vendor chunk
        /^monaco-editor/,  // monaco-editor
      ];

      for (const fileName in bundle) {
        const file = bundle[fileName];

        if (file.type === 'chunk') {
          const shouldExclude = excludePatterns.some(pattern =>
            pattern.test(file.name)
          );

          if (shouldExclude) {
            // 删除 vendor 的 sourcemap
            const mapFileName = `${fileName}.map`;
            if (bundle[mapFileName]) {
              delete bundle[mapFileName];
            }
          }
        }
      }
    }
  };
}

// src/main.js
import * as Sentry from '@sentry/vue';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

Sentry.init({
  app,
  dsn: 'YOUR_SENTRY_DSN',
  environment: 'production',
  release: 'my-project@1.0.0',  // 版本号很重要
  integrations: [
    new Sentry.BrowserTracing(),
  ],
  tracesSampleRate: 1.0,
});

app.mount('#app');

// vite.config.js
import { sentryVitePlugin } from '@sentry/vite-plugin';

export default {
  build: {
    sourcemap: 'hidden',
  },
  plugins: [
    sentryVitePlugin({
      org: 'your-org',
      project: 'your-project',
      authToken: process.env.SENTRY_AUTH_TOKEN,

      // 上传 sourcemap
      sourcemaps: {
        assets: './dist/assets/**',
        ignore: ['**/vendor-*.js.map'],  // 忽略 vendor
      },

      // 上传后删除本地 sourcemap
      cleanArtifacts: true,
    }),
  ],
};

build: {
  sourcemap: 'hidden'
}

// 使用插件在构建后移除 sourcemap 中的源码内容
// 这样只保留位置映射，不包含原始源码
// 可以使用 rollup-plugin-transform 或自定义插件处理 .map 文件

// ❌ 错误：在代码中硬编码敏感信息
const API_KEY = 'sk_live_1234567890abcdef';
const SECRET = 'my-secret-key';

// 即使压缩，sourcemap 也会暴露这些信息

// ✅ 正确：使用环境变量
const API_KEY = import.meta.env.VITE_API_KEY;

// ✅ 正确：从服务器获取
const config = await fetch('/api/config').then(r => r.json());

// vite.config.js
export default {
  build: {
    sourcemap: true,  // 完整的 sourcemap
  }
}

// vite.config.js
export default {
  build: {
    sourcemap: 'hidden',  // 推荐
  }
}

// vite.config.js
export default defineConfig(({ command, mode }) => {
  return {
    build: {
      // 生产环境使用 hidden
      sourcemap: mode === 'production' ? 'hidden' : true,

      // 压缩配置
      minify: 'esbuild',
      esbuildOptions: {
        drop: mode === 'production' ? ['console', 'debugger'] : [],
      },
    },

    plugins: [
      // 过滤第三方库的 sourcemap
      createSourcemapOutputFilter({
        exclude: [/^vendor-/, /^monaco-editor/],
      }),

      // 上传到 Sentry（仅生产环境）
      mode === 'production' && sentryVitePlugin({
        org: 'your-org',
        project: 'your-project',
        authToken: process.env.SENTRY_AUTH_TOKEN,
        sourcemaps: {
          assets: './dist/assets/**',
          ignore: ['**/vendor-*.js.map'],
        },
        cleanArtifacts: true,
      }),
    ].filter(Boolean),
  };
});

// verify-sourcemap.js
const fs = require('fs');
const sourceMap = require('source-map');

async function verifySourcemap(mapFile) {
  const rawSourceMap = JSON.parse(fs.readFileSync(mapFile, 'utf8'));
  const consumer = await new sourceMap.SourceMapConsumer(rawSourceMap);

  // 测试映射
  const pos = consumer.originalPositionFor({
    line: 1,
    column: 100
  });

  console.log('映射结果:', pos);
  // { source: 'src/main.js', line: 15, column: 10, name: 'add' }

  consumer.destroy();
}

verifySourcemap('dist/assets/index.js.map');

// 1. 过滤第三方库（推荐）
plugins: [
  createSourcemapOutputFilter({
    exclude: [/^vendor-/, /node_modules/]
  })
]

// 2. 使用插件移除 sourcesContent
// 可以编写 Vite 插件在 generateBundle 钩子中
// 删除 .map 文件中的 sourcesContent 字段

// 3. 压缩 sourcemap
import { gzip } from 'zlib';
import { promisify } from 'util';

const gzipAsync = promisify(gzip);

// 在 generateBundle 钩子中压缩 .map 文件
async generateBundle(options, bundle) {
  for (const fileName in bundle) {
    if (fileName.endsWith('.map')) {
      const file = bundle[fileName];
      const compressed = await gzipAsync(file.source);
      // 保存为 .map.gz
    }
  }
}