主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
用过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每次启动都需要完整编译,开发版本的预览也需要很长时间。现在我们有了文件依赖,可以只选择当前正在开发的页面进行打包,这样可以大大提高我们的开发效率。如果有人对这部分感兴趣,可以再写一篇文章介绍如何实现。
这几篇文章你可能也喜欢:
- 如何实现小程序发送服务通知(小程序如何主动向用户发送通知)
- 如何获取小程序的unionid(如何获取小程序的页面路径)
- 生成海报的示例小程序(Java后端)(微信小程序生成海报演示)
- 什么是小程序? 有哪些功能?(什么是小程序?有哪些功能?)
- 介绍如何用小程序生成参数二维码(二维码+小程序参数)
本文由主机参考刊发,转载请注明:介绍applet依赖分析的练习(composition介绍applet依赖分析练习) https://zhujicankao.com/120816.html
评论前必须登录!
注册