您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

分析网页 JavaScript Bundles 的几种方法

时间:2020-08-24 10:08:21  来源:  作者:
分析网页 JavaScript Bundles 的几种方法

 

作者:ConardLi

转发链接:https://mp.weixin.qq.com/s/emJ_LjG7FNR81cxl8BnrMA

前言

分析你网页中的 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:

分析网页 JavaScript Bundles 的几种方法

 

然后打开 Network 看板,在看板处于打开状态下重新刷新页面,并点击 JS 筛选项筛选出所有 JavaScript 文件。

分析网页 JavaScript Bundles 的几种方法

 

可以看到,这是一个很简单的网页,里面的代码执行逻辑也很简单,但是如果是一个把所有依赖和代码逻辑都打包在一起的JS文件就不会这么容易分析了,里面的逻辑会非常混乱,你会很难看出里面的代码逻辑。

下面是一个将许多第三方库和本身站点的js模块打包到一起的网站

分析网页 JavaScript Bundles 的几种方法

 

下面我们来看看分析这种代码的方法:

Show Coverage

按 Ctrl+Shift+P 或在Mac上 Command+Options+PP 打开命令菜单,搜索 Coverage 然后选择 Show Coverage 命令:

分析网页 JavaScript Bundles 的几种方法

 

然后重新加载网页,在下拉菜单中选择 JavaScript:

分析网页 JavaScript Bundles 的几种方法

 

在表格中,我们可以很明确的看到每个文件有多少未使用的JavaScript,你还可以单击任何 URL 进行逐行查看分析。

Webpack

尽管上面的方法能让我们看到有多少未使用的 JavaScript 但是要分析组成 Bundles 的模块仍然不容易。

如果你已经在你的网站上打包JS了,那么你肯定使用了 webpack、rollup 等模块打包器,其中很多的工具都为我们提供了分析模块的非常好的方式。

让我们看一个例子,如果你在用 Webpack,那么你可以生成一个 stats.json 的文件,其中包含所有打包模块的统计信息。

分析网页 JavaScript Bundles 的几种方法

 

虽然直接看这个文件也能看出有哪些模块,但是社区的一些工具能够帮我们更好的对模块信息进行可视化分析:

分析网页 JavaScript Bundles 的几种方法

 

比如 webpack-bundle-analyzer,它通过分析 Webpack 打包后的产物,将其映射到 stats.json 的模块名称,然后就创建出了打包产物的交互式树形可视化。显示了每个模块的大小、Gzip解析大小以及彼此之间的关系。

分析网页 JavaScript Bundles 的几种方法

 

SourceMap

这些打包器提供的可视化工具很棒,但是它们都属于打包器特定的工具,对于任何网站,无论使用任何打包器,都可以用 SourceMap 将打包后的代码还原成原始代码。这非常有用,因为它可以使我们在构建过程中经过混淆和转换的代码仍然可以被还原。

在压缩或打包后的 JavaScript 文件中,通过注释指向 SourceMap 文件的位置。

分析网页 JavaScript Bundles 的几种方法

 

所有比较新的浏览器都支持源映射,使用 Chrome,你可以在Devtools 中启用它:

分析网页 JavaScript Bundles 的几种方法

 

当 Chrome 检测到可用的 SourceMap 时,可以还原源代码:

分析网页 JavaScript Bundles 的几种方法

 

source-map-expoler

分析网页 JavaScript Bundles 的几种方法

 

source-map-expoler 可以通过 SourceMap 生成打包产物的树形可视化关系,通过查看这些模块关系,我们可以发现一些问题:

分析网页 JavaScript Bundles 的几种方法

 

比如上面的 moment、lodash 两个库,占整个文件的比重非常大,它们的大小远远超出它们的使用价值,我们可以将它们都转换成 ES 模块,则它们可以变得更小更优化。

Lighthouse

分析网页 JavaScript Bundles 的几种方法

 

使用 Lighthouse,同样可以通过 SourceMap 分析我们打包产物中未使用的 JavaScript 代码。

分析网页 JavaScript Bundles 的几种方法

 

另外还有一个正在探索中的功能,可以利用 SourceMap 分析打包产物中在新浏览器不需要的 polifill 代码。

以上就是几种分析 JavaScript 打包产物的工具和方法,赶快用起来去优化你的 JavaScript 打包产物吧!

作者:ConardLi

转发链接:https://mp.weixin.qq.com/s/emJ_LjG7FNR81cxl8BnrMA



Tags:JavaScript Bundles   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
作者:ConardLi转发链接:https://mp.weixin.qq.com/s/emJ_LjG7FNR81cxl8BnrMA前言分析你网页中的 JavaScript Bundles 大小,并限制网页中的 JavaScript 数量,可以减少浏览器花费...【详细内容】
2020-08-24  Tags: JavaScript Bundles  点击:(84)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(5)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(34)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(35)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(39)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(50)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条