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

4 years ago

source link: http://www.alloyteam.com/2020/06/14639/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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

” 获取对应格式化后的代码行列位置 “

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

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

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

6FNBzae.png!web

“通过压缩代码及行列位置获取对应格式化后的代码行列位置” 的工具

我们可以将压缩代码进行格式化，并结合原来的压缩代码匹配生成 “映射文件” - SourceMap 文件。

有了 SourceMap 文件后，就能够通过压缩代码的行列数找到对应格式化后代码的行列数了。

IJZbqmY.png!web

小结

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

以上为本文所有内容，相关文章：

脚本错误量极致优化-监控上报与 Script error

脚本错误量极致优化-让脚本错误一目了然

Recommend

segmentfault.com 7 years ago
Cache

React同构与极致的性能优化

本文发表于

掘金 juejin.im 5 years ago
Cache

前端极致性能优化手册大全

原文链接前端优化之路必不可少的知识点。浏览器输入url到页面的展现，具体发生了些什么，前端能做哪些优化 DNS 递归查询解析 —— DNS优化pre...

微信 mp.weixin.qq.com 4 years ago
Cache

SourceMap 知多少：介绍与实践

0 1 首先说说sourceMap 说起sourceMap大家肯定都不陌生，随着前端工程化的演进，我们打包出来的代码都是混淆压缩过的，当源代码经过转换后，调试就成了一个问题。在浏览器中调...

微信 mp.weixin.qq.com 4 years ago
Cache

脚本错误量极致优化-让脚本错误一目了然

授权转载自：joeyguo https://github.com/joeyguo/blog/issues/14 在上篇《脚本错误量极致优化-监控上报与Script error》 : https://github.com/joeyguo/blog/issues/13 中，主要提到...

Github github.com 4 years ago
Cache