分布式小程序架构

分布式小程序架构

2021-08-03 640
下载不了?请联系网站客服提交链接错误!
增值服务:
分布式小程序架构
最近更新 2021年08月03日
资源编号 86785

分布式小程序架构

2021-08-03 小程序教程 0 640 百度已收录
限时活动VIP只需20元
增值服务:
¥ 0 钻石 开通VIP尊享优惠特权
立即下载 升级会员
详情介绍

halo大家好久不见,好久没有更新文章了……最近给公司的小程序引擎做了一些优化,性能提升了很多

至此,携程小程序的链路已经基本流畅了,没什么太痛的痛点了

所以我不得不思考其他小程序工具链的痛点……

痛点

携程微信小程序是一个超级复杂的”大程序“,包含几十个分包,每个部门开发自己的分包的时候,必须将其他所有分包都跑起来才行,因为微信 ide 不支持分包运行

整个开发体验式非常痛苦的,而且现在分包的大小也到了极限了,业务迭代也很困难了

重回编译

两年前我提出了重 runtime 的小程序跨端思路,后来有了 remax / taro3 / kbone 等类似思路的框架

这个思路的好处是可以支持所有 react 特性,但坏处是性能差,分包大(额外增加了一个 react 的 runtime)

随着前端社区的发展,像 solidjs / jsx-lite 这类库的出现,大家开始意识到编译路线是有前途的

编译思路的优点:

1. 能够做编译时检查,限制输入
2. 能够优化输出,减少 runtime,减小分包
3. 性能接近原生

但是之所以在现在这个时间点重回编译,是因为 esbuild 和 swc,这些 get rid of js 的工具彻底改变了整个前端编译工具链

分布式架构思路

实际上可以理解为小程序的微前端,但是小程序的限制,在 runtime 做微前端已经是不可能的了,这时候我们的编译器就很有用了

  1. 分包单独编译

每个分包,也就是每个 page 单独打包,我们的编译器不再关注整个小程序的构建,而是只关注独立的 page

保证每个 page 的输出是纯净的,js 和 css 是经过打包的,路径是正确的

2. 根据 pages 把分包路径注入到 app.json 中

这部分也是编译器做的,而且是自动的,pages 下面有几个文件夹,就往 app.json 中注入几个分包

部门独立开发的时候,pages 下面只有一个路径,但是真正上线的时候,CICD 负责把各个分部的分包拼接到一起

3. 编译器检查,做最大程度的限制

编译时的好处就是,可以做编译时检查,限制分包不能有共享依赖,不能修改主板小程序,不能使用 getApp 这种全局 API,不能使用 app 级别的生命周期

其实大型项目都是以限制为主的,之前看 vscode,electron 源码的时候,他们也会对目录结构做约束,区别只是,我们通过编译器做约束,他们通过口头约定

4. CICD 拼接

CICD 负责把不同小程序的 page 分包拼到一起,然后注入到 app.json

总结

其实总的来说,架构并不复杂,和 taro2 类似,但我们需要使用 esbuild 和 swc 重新设计整个编译器,不过不可否认的是,taro 确实可以提供很多灵感

编译 jsx 确实是一个很坑的行为,我只能说一边做一遍寻找思路

我需要很长时间去积累才可以,希望可以帮助公司解决痛点

到时候我们也会考虑申请开源的

资源下载此资源仅限注册用户下载,请先

1、本站赞助VIP,仅需【128】元即可 ! ! ! (赞助后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。(鼓励大家签到)
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再赞助下载!收取的费用只为能长期与大家分享学习,本站为非商业性网站,纯属个人爱好!

K4资源 小程序教程 分布式小程序架构 https://www.k4sc.com/86785.html

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务