webpack生产环境设devtool为source-map会增大构建体积？影响客户端吗？

嘿，你提到的这个问题其实挺常见的，很多人第一次在生产环境开启source-map都会疑惑体积突然涨这么多。先别慌，咱们拆解一下这里面的关键点：

• source-map不会影响普通用户的加载体验
  你看到的7.1MB是包含了.map后缀的调试文件的总构建体积，但这些map文件是单独生成、不会被打包进主业务bundle的。普通用户访问你的网站时，浏览器只会加载主bundle（大小还是接近原来的2.9MB），只有当开发者打开浏览器DevTools进行调试时，浏览器才会主动请求对应的map文件。也就是说，日常访问的用户完全感受不到这个体积变化。

• 生产环境推荐source-map的核心价值
  虽然它会生成额外的文件，但这些map文件能帮你在生产环境遇到报错时，直接定位到源码中的具体行号和文件，而不是混淆压缩后的打包代码——这对线上问题的排查效率提升不是一星半点。而且你还可以通过配置把map文件放在非公开的路径（比如内部CDN或者服务器私有目录），只给开发/运维人员访问权限，兼顾调试便利性和用户体验。

• 可选的轻量化source-map方案
  如果你还是担心map文件的存储成本，也可以选择更轻量的source-map类型：

  • hidden-source-map：不会在主bundle中添加map文件的引用，只有内部人员知道map文件的位置，不会被外部主动请求
  • cheap-module-source-map：生成的map文件体积更小，但调试信息会稍微简略（比如只能定位到行，不能定位到列）
    不过生产环境最推荐的还是source-map，因为它提供的调试信息最完整，能帮你最快定位问题。

内容的提问来源于stack exchange，提问作者rfc1484