VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动

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

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

微信小程序开发教程介绍小程序依赖分析的实践。介绍applet依赖分析的练习(composition介绍applet依赖分析练习)

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

webpack-bundle-analyzer

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

小程序依赖关系

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

小程序的页面由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

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

最后效果

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

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

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

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 介绍applet依赖分析的练习(composition介绍applet依赖分析练习)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!