VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动
华纳云最新优惠促销活动

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

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

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

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

webpack-bundle-analyzer

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

小程序依赖关系

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

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

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

最后效果

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

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

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

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

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

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 介绍applet依赖分析的实践(applet案例分析)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!