脚本错误量极致优化-定位压缩且无SourceMap文件的脚本错误

Question

joeyguo opened this issue 4 years ago · 0 comments

”JS 代码压缩后，定位具体出错代码困难！“ 的问题，我们可以通过 SourceMap 快速定位，处理得到源文件的具体错误信息。具体方式可以查看《脚本错误量极致优化-让脚本错误一目了然》

然而当项目外链第三方资源或公共库时，这种压缩且无提供 SourceMap 的文件出现异常，又该如何更好的定位错误位置呢？

我们可以将压缩代码进行格式化，当错误出现时，错误信息也就有了具体的行列数，更够方便定位到错误位置。

!function(n) {
    // ...
    // ...
}([ function(n, r) {
    function t() {
        noerror;
    }
    t();
} ]);

而此时，格式化后的代码由于增加了换行和空格，增加了文件的大小，所以并不推荐这种方式。但这种试图 “通过压缩代码的出错行列位置转换成格式化代码对应的出错行列位置” 的思路我们可以接着进行优化。将格式化代码的转换进行后置处理。借助工具，避免提前格式化导致的文件增大问题。

我们可以将压缩代码进行格式化，并结合原来的压缩代码匹配生成“映射文件” - SourceMap 文件。
有了 SourceMap 文件后，就能够通过压缩代码的行列数找到对应格式化后代码的行列数了。

当遇到压缩且无源码 SourceMap 的文件出错时，借助上面提到的“工具”，能够找到其对应格式化后的代码及出错位置，更好的定位具体问题。具体工具的使用与实现方式可见 https://github.com/joeyguo/js-beautify-sourcemap