-
sourcemap
通过sourcemap定位到源码,开发环境开启,线上关闭;sourcemap可以传到监控系统中,用于定位问题;
-
实践
生产环境
- (none) 打包后的代码 适用于**
生产环境** ,性能的最佳选择. 源代码啥也看不到,没有map文件;
- source-map 适用于**
生产环境** ,高质量的SourceMaps.
source-map- 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释,以便开发工具知道在哪里可以找到它。Warning
你应该将你的服务器配置为,不允许普通用户访问 source map 文件!
- nosources-source-map
nosources-source-map- 创建的 source map 不包含sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪,而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。Warning
这仍然会暴露反编译后的文件名和结构,但它不会暴露原始代码。
- hidden-source-map
hidden-source-map- 与source-map相同,但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息,但不想为浏览器开发工具暴露你的 source map,这个选项会很有用。Warning
你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。
开发环境
- eval 鸡肋 带 eval 生成后的代码 适合开发环境,不太适合放到生产环境,这个还好, 主要是生成的js文件包含sourcemap和业务代码,js文件明显变大了,不太适合放到生产环境;
eval- 每个模块都使用eval()执行,并且都有//# sourceURL。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数。来自于:官方文档;
- eval-cheap-source-map 鸡肋
类似
eval-source-map,每个模块使用eval()执行。这是 "cheap(低开销)" 的 source map,因为它没有生成列映射(column mapping),只是映射行数。它会忽略源自 loader 的 source map,并且仅显示转译后的代码,就像evaldevtool。
- eval-cheap-module-source-map 还可以;
eval-cheap-module-source-map- 类似eval-cheap-source-map,并且,在这种情况下,源自 loader 的 source map 会得到更好的处理结果。然而,loader source map 会被简化为每行一个映射(mapping)。
- eval-source-map 最佳的**
开发环境** ;
eval-source-map- 每个模块使用eval()执行,并且 source map 转换为 DataUrl 后添加到eval()中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。
特定场景
以下选项对于开发环境和生产环境并不理想。他们是一些特定场景下需要的,例如,针对一些第三方工具。
用到了,自行验证;
- inline-source-map - source map 转换为 DataUrl 后添加到 bundle 中;
cheap-eval-source-map V5不支持;cheap-module-eval-source-map V5不支持;- cheap-source-map 没有列映射(column mapping)的 source map,忽略 loader source map。[文件大小合适,源码也看不到];
- cheap-module-source-map 没有列映射(column mapping)的 source map,将 loader source map 简化为每行一个映射(mapping)。[module会暴露源码];
- inline-cheap-source-map 类似
cheap-source-map,但是 source map 转换为 DataUrl 后添加到 bundle 中。[文件大小合适,源码也看不到]; - inline-cheap-module-source-map 类似
cheap-module-source-map,但是 source mapp 转换为 DataUrl 添加到 bundle 中。[module会暴露源码];
官方文档提到的sourcemap选项,有的在本文中未提及,用到了再说,一般用不到!!!