家族战队|分析网页 JavaScript Bundles 的几种方法
作者：ConardLi
转发链接：
前言分析你网页中的 JavaScript Bundles 大小 ， 并限制网页中的 JavaScript 数量 ， 可以减少浏览器花费在解析、编译和执行 JavaScript 的时间 。 这可以加快浏览器可以开始响应用户交互行为的速度 ， 从而改善 First Input Delay、Largest Contentful Paint 等几个重要的性能指标 。
本文我们来一起看看分析网页中 JavaScript Bundles 的几种方法 。
查看 JavaScript 文件使用 Chrome Devtools 中的 Network 看板是查看页面上下载所有 JavaScript 最简单的方法 。
按 Ctrl+Shift+J 或在Mac上 Command+Options+J 打开 Devtools：
然后打开 Network 看板 ， 在看板处于打开状态下重新刷新页面 ， 并点击 JS 筛选项筛选出所有 JavaScript 文件 。
可以看到 ， 这是一个很简单的网页 ， 里面的代码执行逻辑也很简单 ， 但是如果是一个把所有依赖和代码逻辑都打包在一起的JS文件就不会这么容易分析了 ， 里面的逻辑会非常混乱 ， 你会很难看出里面的代码逻辑 。
下面是一个将许多第三方库和本身站点的js模块打包到一起的网站：
下面我们来看看分析这种代码的方法：
Show Coverage按 Ctrl+Shift+P 或在Mac上 Command+Options+PP 打开命令菜单 ， 搜索 Coverage 然后选择 Show Coverage 命令：
然后重新加载网页 ， 在下拉菜单中选择 JavaScript：
在表格中 ， 我们可以很明确的看到每个文件有多少未使用的JavaScript ， 你还可以单击任何 URL 进行逐行查看分析 。
Webpack尽管上面的方法能让我们看到有多少未使用的 JavaScript 但是要分析组成 Bundles 的模块仍然不容易 。
如果你已经在你的网站上打包JS了 ， 那么你肯定使用了 webpack、rollup 等模块打包器 ， 其中很多的工具都为我们提供了分析模块的非常好的方式 。
让我们看一个例子 ， 如果你在用 Webpack ， 那么你可以生成一个 stats.json 的文件 ， 其中包含所有打包模块的统计信息 。
虽然直接看这个文件也能看出有哪些模块 ， 但是社区的一些工具能够帮我们更好的对模块信息进行可视化分析：
比如 webpack-bundle-analyzer ， 它通过分析 Webpack 打包后的产物 ， 将其映射到 stats.json 的模块名称 ， 然后就创建出了打包产物的交互式树形可视化 。 显示了每个模块的大小、Gzip解析大小以及彼此之间的关系 。
推荐阅读
- 芯片|气候异常！东北半个月遭台风三连击，分析：短期长期都不是好事
- 【】家族势力把控基层政权 河南一“村官”涉黑团伙32人获刑
- 大河客户端|布局战队，导师各有妙招，《2020中国好声音》收视率蝉联第一
- 板块|美元贬值一定提振美股？ 华尔街分析师表示并不，但对个别板块有明显刺激作用
- 周到|“好声音”蝉联省级卫视综艺节目收视第一，首迎抢位战导师布局战队各有妙招
- 股票|美元贬值一定提振美股？ 华尔街分析师表示并不，但对个别板块有明显刺激作用
- 映璇汽车工作室|终于知道它为啥难卖了，看完长城WEY内部技术团队做的竞品分析
- 解说小南风|枪火重生：从武器机制分析什么适合上手
- 卡戴珊家族|卡戴珊家族钟爱黑人？63岁“武则天”选上小25岁男友，NBA球星窃喜
- 通天战队|A股最励志闻泰科技！给华为小米打工到半导体巨头，半年赚17亿