在日常开发过程中,我们编写的源代码通过多重处理(编译,封装,压缩…),最后形成的产物代码,在浏览器中调试时,我们会发现代码变得面目全非,根本没办法调试。
因此,我们需要一种将产物代码回溯到源代码的功能,Source Map就是实现这一功能的工具。
Source Map的基本原理是,在编译过程中,在生成产物代码的同时也生成基于源代码的一份映射关系表。有了这张映射关系表,我们就可以通过 chrome 控制台中的“Enable JavaScript source map”来实现调试时的显示与定位源代码的功能。
生成Source Map的方式有很多种,他们的构建速度、质量(反解代码与源代码的接近程度以及调试时行号等辅助信息的对应情况)、访问方式(在产物文件中或单独生成 source map)、文件大小都各不相同。在开发和生成环境下我们对 source map 的期望也有所不同。
- 在开发环境中,我们更关心构建速度、质量,以便于提升开发效率,而不关心文件大小与访问方式
- 在生产环境中,我们更关注的是,是否需要开启 source map,生成文件的大小和访问方式是否对页面性能造成影响,其次才是质量和构建速度。