简介：JavaScript是前端应用程序的主要语言。与其他平台编程语言相比，在大多数情况下，必须通过网络加载JS资源。然后，代码的卷直接影响页面加载的执行时间。“无效代码”的数量直接影响我们的代码质量，因此测量代码的执行覆盖范围是重要的优化前缀。
您无法管理无法测量的内容。
如果您无法衡量，就无法管理它。—管理大师Peter Drucker
JavaScript是前端应用程序的主要语言。与其他平台编程语言相比，在大多数情况下，必须通过网络加载JS资源，因此代码的卷直接影响页面负载的执行时间。“无效代码”的数量直接影响我们的代码质量，因此测量代码的执行覆盖范围是重要的优化前缀。
1.死亡代码
死亡代码也称为无用的代码。这个概念应该是对编译过程中执行没有影响的代码。例如：
通常，我们在编译过程中使用树摇动以删除这些死亡代码，以减少代码的大小。
2.冗余代码
代码覆盖范围中提到的冗余代码与死亡代码略有不同。简而言之，死亡代码适用于编译，并且代码编码适合运行时。
死亡代码是任何情况下均未执行的代码，因此可以在编译阶段将其删除。
冗余代码在某些特定的业务逻辑下，不会执行这些代码逻辑（例如：加载第一个屏幕时，完全不会加载某个前端组件，因此对于“第一个屏幕”业务业务逻辑案例“第一屏幕”的逻辑案例，前端代码是多余的）
3.代码覆盖率
Code Covege是软件测试中的测量指标。也就是说，在测试（运行时）在整个源代码比例的情况下执行的源代码。
1. Chrome浏览器开发工具
Chrome浏览器的DevTools为我们提供了用于测量页面代码（JS，CSS）覆盖率的工具。
提示：当然，如果您有源地图，也可以使用浏览器查看源代码的覆盖范围：
1.在源选项卡中找到当前页面的JS资源文件（当然，困惑的面部）
2.输入Sourcemap URL（以Def发布平台为例，您可以在施工结果中找到它）
3.您可以在WebPack目录中查看相应源代码的一般覆盖范围：//（但没有消耗值）
因此，问题是，有没有办法使开发人员了解源代码的代码覆盖范围的价值？
2. Isstanbul（NYC）
该软件以土耳其最大的城市伊斯坦布尔命名，因为土耳其地毯世界被用来覆盖。
伊斯坦布尔或纽约市（基于伊斯坦布尔的纽约市）是测量JavaScript计划的代码覆盖工具。目前，大多数节点代码测试框架用于获取测试报告。有四个测量维度：
我们可以使用Babel-Plugin-Stanbul插件来包装源代码的源代码。这种汇编方法也称为代码插入桩 /插入桩结构（仪器）
3.建筑物
如果我们要测量执行哪个代码，未执行哪个代码，我们将做什么？
我们可以轻松地考虑在我们的源代码中添加一些“装饰”代码，因此，当代码在某个地方执行时，我们将在全球环境变量中记录：
iStabul也这样做。Babel-Plugin-Stanbul在施工过程中分析AST并添加了相应的统计单位（陈述，功能，分支等）。DATA：DATA：
当我们运行代码时，我们会得到以上JSON的消费。
提示：Tbox消费者每平方米消费者 - 本地开发套件
现在我们知道了源代码的代码覆盖范围，我们可以使用它来优化性能优化？
当项目所有者捆绑包大时，使用大型/无用的前端组件来减肥是一个可行的选择。目前，可以根据代码覆盖范围优化哪个代码。
1.代码分割
react.lazy为我们提供了一个很好的主意，可以使用动态加载模块标准化导入（）（webpack to import（）分析作为代码分割）以实现前端组件代码懒惰加载/动态加载。
以此为灵感，为什么不通过动态介绍加载某些组件以换取主页捆绑包的减肥呢？
2.下一步
我们可以通过0的代码覆盖范围（或少于阈值值的30％）来计数代码的代码，并在项目项目（在app.json中）中自动生成持久的文件配置，然后再生成持久的文件配置根据配置对其进行配置。这些较低使用率的组件代码将在生产构造时将其重写为动态引入产品代码。
因此，有以下计划：
3.如何使用
运行Tbox：
2.桩插入结构
3.分析自动化生成配置
伊斯坦布尔在节点环境中运行测试案例代码。能源测量覆盖范围是由于其源代码在运行时拦截了模块加载程序的源代码，但是更遗憾的是，本文中插入的代码的代码插入桩分析将引入一些额外的堆代码。也许它是一种更完美的方法，用于测量Puppeteer提供的覆盖范围API + Sourcemap的覆盖范围 +源代理反向汇编。这是一种更完美的方法。期待与君主一起探索并继续努力工作！
原始链接
本文是阿里巴巴云的原始内容，未经许可就无法重印。
原始：https：//juejin.cn/post/7098530380034080799