介绍applet依赖分析的练习(composition介绍applet依赖分析练习)

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

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

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

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

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

如果开发目录是:

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

{ & quot页面& quot：

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

const fs = require(' fs-extra ')const path = require(' path ')const root = process . CWD()class Depend { constructor(){ this . context = path . join(root，Miniprogram ')}//Get absolute address Get absolute(File){ return path . join(this . context，File)} Run () {const apppath = this。get Absolute(' app . JSON ')const app JSON = fs . readjsonsync(app path)const { pages } = app JSON//主包的所有页面}}复制代码。每个页面将对应于四个文件json、js、wxml、wxss:

常量扩展=

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

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

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

const { parse } = require(' @ babel/parser ')const { default:traverse } = require(' @ babel/traverse ')class Depend {//...jsDeps(file) { const deps =

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

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

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

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

该字段类型指示根字符串分包根目录名称字符串分包别名。预下载委外时可以使用pagesStringArray对页面路径进行委外，独立于委外根目录。布尔分包是独立的，所以当我们运行时，除了所有页面之外，还需要获取子包中的所有页面。因为之前我们只关心主包的内容，所以这个. tree下只有一个文件树，现在我们需要在这个. tree下挂载多个文件树，我们需要先为主包单独创建一个文件树，然后再为每个分包创建一个文件树。

class Depend { constructor(){ this . tree = { } this . files = new Set()this . context = path . join(root，' mini program ')} create tree(pkg){ this . tree

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

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

总结这篇文章比较实用，所以贴了很多代码。另外，本文为各种文件的依赖关系获取提供了一个思路，虽然这里只是用文件树构造了一个依赖图。

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

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

• 在小程序中优化css树抖动。
• 自定义小程序的动画框/提示框。
• 用矢量字体自定义小程序图标组件图标。
• 小程序内嵌h5页面，小程序webview页面等方法实现微信支付。
• 小程序和app有什么区别？(小程序和app一样吗？)

本文由主机参考刊发，转载请注明：介绍applet依赖分析的练习(composition介绍applet依赖分析练习) https://zhujicankao.com/120816.html