05-SourceMap

nobility 发布于 2022-01-05 846 次阅读


SourceMap

SourceMap是编译后代码对源码的映射,通过映射可追踪到源代码中的错误,对于不同的SourceMap格式会明显影响到打包速度,在webpack中使用devtool参数可设置SourceMap格式,该参数的值是一组有规律的字符串,但是要注意这些关键词的顺序:^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$

想关闭SourceMap功能在webpack5以前使用none参数值即可,在webpack5以后使用false参数即可

以下所说的的注释DateUrl是指//# sourceMappingURL=map文件路径或map文件内容这样类型的注释,若找不到该文件或该文件异常则报DevTools failed to load SourceMap: Could not load content for的警告

  • source-map:SourceMap会额外生成一个映射文件,在编译后代码使用注释DataUrl引入SourceMap文件
  • inline:SourceMap会整个内嵌到js文件中,在编译后代码使用注释DataUrl形式呈现
  • hidden:SourceMap会隐藏源代码,在编译后代码添加注释DataUrl即可显示出来
  • nosource:SourceMap会映射源代码位置,但是不会在浏览器中显示源代码,即map文件中没有记录源代码
  • cheap:SourceMap精确到行,而且仅映射业务代码
  • module:SourceMap既映射业务代码,又映射其他loader和第三方模块代码
  • eval:SourceMap是使用JavaScript中的eval函数中添加注释DataUrl,会有哈希值,性能最好的方式

内敛构建速度要比外部的快,但是生成的文件较大,建议生成环境下使用eval-cheap-module-source-map,线上环境使用cheap-module-source-map

此作者没有提供个人介绍
最后更新于 2022-01-05