介绍applet依赖分析的实践(applet案例分析)

微信小程序开发教程介绍小程序依赖分析的实践。

用过webpack的同学一定知道，webpack-bundle-analyzer可以用来分析当前项目中js文件的依赖关系。

因为最近在做小程序业务，小程序对包的大小特别敏感，不知道能不能做一个类似的工具，检查一下当前小程序的主包与子包之间的依赖关系。折腾了几天，终于做出来了。效果如下:

今天的文章就带你认识一下这个工具。

applet入口applet的页面由app.json的pages参数定义，该参数用于指定applet由哪些页面组成，每一项对应一个页面的路径(包括文件名)信息。对于pages中的每个页面，applet将查找相应的json、js、wxml、wxss文件进行处理。

如果开发目录是:

├──app.js├──app.json├──app.wxss├──pages│──index││├──index . wxml││├──index . js││├──index . JSON││└──index . wxss│└──l ogs│├——logs . wxml└———logs . js│——utils复制代码需要写在app.json:

{ 页面 :

以app.json为入口，我们可以得到主包下的所有页面。

const fs = require( # 39；fs-extra # 39；)const path = require( # 39；路径 # 39；)const root = process . CWD()class Depend { constructor(){ this . context = path . join(root， # 39；迷你程序 # 39；)}//获取绝对地址getabsolute(file){ return path . join(this . context，file)} run(){ constapppath = this . getabsolute( # 39；app.json # 39)const app JSON = fs . readjsonsync(app path)const { pages } = app JSON//主包的所有页面}}复制代码。每个页面将对应于四个文件json、js、wxml、wxss:

常量扩展=

以上获取依赖关系的步骤看似没问题，但是我们遗漏了一个重要的环节，就是在构造文件树之前，我们还需要获取每个文件的依赖关系，这样输出的才是小程序完整的文件树。文件的依赖关系需要分为四个部分，分别是js、json、wxml、wxss，这是针对四类文件获取依赖关系的途径。

越来越。js文件依赖于applets支持模块化CommonJS的方式。如果es6开启，也可以支持ESM进行模块化。如果我们想得到一个js文件的依赖关系，我们必须首先明确有三种方法可以编写js文件导入模块。对于以下三种语法，我们可以引入巴别塔来获得依赖关系。

从 # 39；./a . js # 39；从 # 39；导出b；./b . js # 39；const c = require( # 39；./c . js # 39；)复制代码，通过@babel/parser转换成AST，然后通过@babel/traverse遍历AST节点，得到以上三个导入方法的值，放入数组中。

const { parse } = require( # 39；@ babel/parser # 39；)const { default:traverse } = require( # 39；@ babel/traverse # 39；)类依赖{ //...jsDeps(file) { const deps =

获取。json文件依赖于json文件本身，不支持模块化。但是小程序可以通过json文件导入自定义组件，只需要在页面的json文件中通过usingComponents进行引用声明即可。UsingComponents是一个对象，键是自定义组件的标签名，值是自定义组件的文件路径:

{ 使用组件 :{ 组件-标签-名称 : /custom/component ；}}复制代码自定义组件和小程序页面一样，也会对应四个文件，所以我们需要获取json中usingComponents的所有依赖关系，判断每个组件对应的四个文件是否存在，然后添加到依赖关系中。

类依赖关系{ //...jsonDeps(file) { const deps =

转包要靠熟悉小程序的同学。学生必须知道小程序提供分包机制。转包后，转包中的文件会打包成一个单独的包，只在使用的时候加载，其他文件放在主包中，打开小程序时加载。在子分包中，每个分包的配置包含以下项目:

字段描述rootString分包根目录名称String分包别名，分包预下载时可以使用pagesStringArray分包页面路径，分包是否独立与分包根目录独立布尔分包相比，所以我们在运行时需要获取除所有页面之外的所有子包中的页面。因为之前我们只关心主包的内容，所以这个. tree下只有一个文件树，现在我们需要在这个. tree下挂载多个文件树，我们需要先为主包单独创建一个文件树，然后再为每个分包创建一个文件树。

class Depend { constructor(){ this . tree = { } this . files = new Set()this . context = path . join(root， # 39；迷你程序 # 39；)} createTree(pkg) { this.tree

接下来，我们使用ECharts的绘图功能以图表的形式显示这些json数据。我们可以在ECharts提供的例子中看到一个磁盘使用的案例，符合我们的预期。

这里就不重复ECharts的配置了。按照官网的演示就可以了。我们需要转换树的数据。json转换成ECharts要求的格式。完整的代码放在codesandbod中，去下面的在线地址可以看到效果。

这篇文章的总结比较实用，所以贴了很多代码。此外，本文还提供了一种获取每个文件的依赖关系的思路，尽管这里只使用了一个文件树来构建这样一个依赖图。

在业务开发中，小程序IDE每次启动都需要完全编译，开发版本的预览需要很长时间。现在我们有了文件依赖关系，可以只选择当前正在开发的页面进行打包，这样会大大提高我们的开发效率。如果你对这部分感兴趣，可以再写一篇文章介绍如何实现。

以上是小程序依赖分析练习的详细内容。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 下面来说说小程序中页面传递参数的几种方式（微信小程序页面传递值）。
• 如何在小程序中实现下拉刷新和上拉加载功能？（附代码）（小程序的上拉加载触发器）
• 如何在小程序中创建页面二维码
• 如何通过applet vant组件将默认样式单元px转换为rpx（Vantui applet）
• 再来说说微信小程序中的生命周期（功能）（请谈谈小程序的生命周期功能？)

本文由主机参考刊发，转载请注明：介绍applet依赖分析的实践(applet案例分析) https://zhujicankao.com/81939.html