前端项目中关闭 sourcemap

1. Webpack

方法一：修改 webpack.config.js

module.exports = {
  // 开发环境
  devtool: false,
  
  // 或者根据环境变量配置
  devtool: process.env.NODE_ENV === 'production' ? false : 'eval-cheap-module-source-map',
  
  // 其他配置...
};

方法二：使用环境变量

# 构建时禁用 sourcemap
webpack --devtool false

2. Vite

vite.config.js

export default {
  build: {
    sourcemap: false, // 禁用 sourcemap
  },
  
  // 或者根据环境配置
  build: {
    sourcemap: process.env.NODE_ENV !== 'production',
  }
}

3. Create React App

方法一：设置环境变量

# 构建时禁用 sourcemap
GENERATE_SOURCEMAP=false npm run build

方法二：在 .env 文件中配置

# 创建 .env 文件
GENERATE_SOURCEMAP=false

方法三：eject 后修改配置

如果执行了 npm run eject，可以在 config/webpack.config.js 中修改：

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'true';

4. Vue CLI

vue.config.js

module.exports = {
  configureWebpack: {
    devtool: false
  },
  
  // 或者
  productionSourceMap: false
}

5. Angular

angular.json

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "sourceMap": false
            }
          }
        }
      }
    }
  }
}

6. Nuxt.js

nuxt.config.js

export default {
  build: {
    devtool: false
  }
}

7. Next.js

next.config.js

module.exports = {
  productionBrowserSourceMaps: false, // 禁用浏览器端 sourcemap
}

8. Rollup

rollup.config.js

export default {
  output: {
    sourcemap: false
  }
}

9. Parcel

Parcel 默认在生产构建中禁用 sourcemap，无需额外配置。如果需要显式禁用：

package.json

{
  "parcel-bundler": {
    "sourceMaps": false
  }
}

优势

关闭 sourcemap 可以：

• 减少构建输出文件大小
• 加快构建速度
• 提高生产环境安全性（隐藏源代码）
• 减少部署包体积

注意事项

• 开发环境建议保留 sourcemap 以便调试
• 生产环境建议关闭 sourcemap 以获得更好的性能
• 如果需要进行生产环境错误追踪，可以考虑使用专门的错误监控服务

选择适合你项目构建工具的配置方法即可成功关闭 sourcemap。