分析网页 JavaScript Bundles 的几种方法
分析你网页中的 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解析大小以及彼此之间的关系。
SourceMap
这些打包器提供的可视化工具很棒,但是它们都属于打包器特定的工具,对于任何网站,无论使用任何打包器,都可以用 SourceMap
将打包后的代码还原成原始代码。这非常有用,因为它可以使我们在构建过程中经过混淆和转换的代码仍然可以被还原。
在压缩或打包后的 JavaScript
文件中,通过注释指向 SourceMap
文件的位置。
所有比较新的浏览器都支持源映射,使用 Chrome
,你可以在 Devtools
中启用它:
当 Chrome
检测到可用的 SourceMap
时,可以还原源代码:
source-map-expoler
source-map-expoler
可以通过 SourceMap
生成打包产物的树形可视化关系,通过查看这些模块关系,我们可以发现一些问题:
比如上面的 moment、lodash
两个库,占整个文件的比重非常大,它们的大小远远超出它们的使用价值,我们可以将它们都转换成 ES
模块,则它们可以变的更小更优化。
Lighthouse
使用 Lighthouse
,同样可以通过 SourceMap
分析我们打包产物中未使用的 JavaScript
代码。
另外还有一个正在探索中的功能,可以利用 SourceMap
分析打包产物中在新浏览器不需要的 polifill
代码。
以上就是几种分析 JavaScript
打包产物的工具和方法,赶快用起来去优化你的 JavaScript
打包产物吧!
了解更多:https://www.youtube.com/watch?v=MxBCPc7bQvM
推荐阅读
1、力扣刷题插件
2、你不知道的 TypeScript 泛型(万字长文,建议收藏)
3、TypeScript 类型系统
4、immutablejs 是如何优化我们的代码的?
5、typeScript 配置文件该怎么写?
6、前端换肤的N种方案,请收下
7、【校招面经分享】好未来-北京-视频面试
❝
关注加加,星标加加~
❞
如果觉得文章不错,帮忙点个在看呗
分析网页 JavaScript Bundles 的几种方法相关推荐
- 网页转exe的三种方法
网页转exe的三种方法 前言:最近公司有个项目需要将几个子系统嵌入到一个大的系统中去,嵌入的要求是必须得是exe程序,但是有几个子系统是基于web运行的,所以需要找到将web项目转化为exe的方法.结 ...
- 解除网页屏蔽的另一种方法
看了supNate的blog觉得很有启发,不过觉得alert的话还可以被重写,直接用void不就完事了. 这个时代真的需要创造力. /**/ /*author:livahu **2006-12-22 ...
- 网页优化速度的7种方法
网站优化是指通过对网站功能.网站结构.网页布局.网站内容等要素的合理设计,使得网站内容和功能表现形式达到对用户友好并易于宣传推广的最佳效果,充分发挥网站的网络营销价值,是一项系统性和全局性的工作,包括 ...
- JavaScript创建对象的4种方法
JavaScript 创建对象的4种方法 所谓对象就是用来帮助你完成一些事情是,对象是有特征和行为的,是具体特指的某一个事物.使用对象可以使程序更加整洁 通过Object()方法来创建 Object( ...
- HTML5动态加载资源方式,动态加载JavaScript文件的两种方法
这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval ...
- html按照字数分页,纯javascript实现分页(两种方法)
先给大家贴效果图: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用 ...
- php javascript分页,纯javascript实现分页(两种方法)
有的时候页面需要很多不同的表组成的数据,该怎么分页呢?使用数据库分页很简单,那么如何使用js实现分页呢?接下来,小编帮大家解决这个问题,需要的朋友一起来学习吧 先给大家贴效果图: 网上确实有很多分页的 ...
- JS教程之 识别 JavaScript 数据类型:两种方法就足够了
Primitive type原始类型: Null.Undefined.Number.String.Boolean.Symbol.BigInt vObject type 对象类型: Object 你知道 ...
- php伪造页面url地址,php 伪造HTTP_REFERER网页URL来源的三种方法
php获取当前网页的前一个网页URL地址,即当前网页是从哪个网页链接过来的,可以使用$_SERVER['HTTP_REFERER'],但是这个来源网页的URL地址是可以被伪造和欺骗的,本文章向大家简介 ...
最新文章
- 【英文文本分类实战】之四——词典提取与词向量提取
- HTML5无刷新修改URL:利用 History API 无刷新更改地址栏
- 生产可用:是时候来一个微前端架构了!
- 支撑性服务 自动化能力
- JQGrid 参数、属性API
- 昨日购买了华为U8800+。晒联通2.2版系统与官方2.3版系统的评测跑分。
- php ftp 下载大文件,文件在用php(ftp)下载后损坏[重复]
- HBase权威指南阅读——第一章
- Unity插件——Odin使用心得(一)
- 盈利稳定增长:盈利收益率法
- 一个虚拟摄像头Filter(Virtual Cam Capture Filter)
- 中国医科大学计算机应用本科作业答案,17秋中国医科大学《计算机应用基础(本科)》在线作业100分标准答案...
- 迅捷PDF转Word转换器
- 原神迷城战线光界篇冰结试炼怎么过
- 单页双曲面 matlab,如何画双叶双曲面
- Mysql—时间戳的转换
- 秒懂云通信:短信也能玩出新花样?听阿里云产品运营畅聊“智能消息”服务
- mysql导入excel表格数据时出错的解决
- 怎么分析外链推广呢?
- docker 构建tomcat镜像部署war包