家族战队|分析网页 JavaScript Bundles 的几种方法( 二 )
SourceMap这些打包器提供的可视化工具很棒 ， 但是它们都属于打包器特定的工具 ， 对于任何网站 ， 无论使用任何打包器 ， 都可以用 SourceMap 将打包后的代码还原成原始代码 。 这非常有用 ， 因为它可以使我们在构建过程中经过混淆和转换的代码仍然可以被还原 。
【家族战队|分析网页 JavaScript Bundles 的几种方法】在压缩或打包后的 JavaScript 文件中 ， 通过注释指向 SourceMap 文件的位置 。
所有比较新的浏览器都支持源映射 ， 使用 Chrome ， 你可以在Devtools 中启用它：
当 Chrome 检测到可用的 SourceMap 时 ， 可以还原源代码：
source-map-expoler
source-map-expoler 可以通过 SourceMap 生成打包产物的树形可视化关系 ， 通过查看这些模块关系 ， 我们可以发现一些问题：
比如上面的 moment、lodash 两个库 ， 占整个文件的比重非常大 ， 它们的大小远远超出它们的使用价值 ， 我们可以将它们都转换成 ES 模块 ， 则它们可以变得更小更优化 。
Lighthouse使用 Lighthouse ， 同样可以通过 SourceMap 分析我们打包产物中未使用的 JavaScript 代码 。
另外还有一个正在探索中的功能 ， 可以利用 SourceMap 分析打包产物中在新浏览器不需要的 polifill 代码 。
以上就是几种分析 JavaScript 打包产物的工具和方法 ， 赶快用起来去优化你的 JavaScript 打包产物吧！
作者：ConardLi
转发链接：
推荐阅读
- 芯片|气候异常！东北半个月遭台风三连击，分析：短期长期都不是好事
- 【】家族势力把控基层政权 河南一“村官”涉黑团伙32人获刑
- 大河客户端|布局战队，导师各有妙招，《2020中国好声音》收视率蝉联第一
- 板块|美元贬值一定提振美股？ 华尔街分析师表示并不，但对个别板块有明显刺激作用
- 周到|“好声音”蝉联省级卫视综艺节目收视第一，首迎抢位战导师布局战队各有妙招
- 股票|美元贬值一定提振美股？ 华尔街分析师表示并不，但对个别板块有明显刺激作用
- 映璇汽车工作室|终于知道它为啥难卖了，看完长城WEY内部技术团队做的竞品分析
- 解说小南风|枪火重生：从武器机制分析什么适合上手
- 卡戴珊家族|卡戴珊家族钟爱黑人？63岁“武则天”选上小25岁男友，NBA球星窃喜
- 通天战队|A股最励志闻泰科技！给华为小米打工到半导体巨头，半年赚17亿