实现Taro 项目拆分到多个分包(Taro和原生混合开发)

实现Taro 项目拆分到多个分包

前提: 本文适合有Taro和小程序混合开发经验的人阅读(ps不然会一脸懵逼😳)

本文采用taro3.4.11和原生小程序混合开发,把 Taro项目作为一个完整分包,塞进原生小程序中,Taro文档中的案例写的很清楚,随着业务推进,taro项目越来越大,作为主项目的分包已经远远超过2m,两个思路:

1、优化打包后的体积
2、拆分到多个分包

第一个思路针对紧急需求,优化的方案也很多,这里不多赘述。今天分享的拆分到多个分包的思考以及实现过程。

思考及实现过程

翻阅着Taro文档,看到混合开发下面还有几行小字: “把Taro 项目拆分到多个分包假设有一个 Taro 项目,它含有页面 A 和页面 B。我们需要把页面 A加入原生项目的其中一个分包M,把页面 B 加入到另一个分包 N。”
就像找到了救星一样,但是定睛一看,案例呢??只有短短一句:

“分别对 A、B页面使用混合模式打包,步骤和把 Taro 项目作为一个完整分包一致。”

外加一个注意点:

“需要配置 Webpack 的 output.jsonpFunction 配置,避免 chunkid的冲突。”

貌似说了啥貌似也没说啥,不过可以确定的是拆分到多个分包这个方案是可以实现的。接着拆分任务:

1、先把一个页面能打包出来
2、研究chunkid冲突的问题

一遍一遍翻着文档,搜索整个互联网最后得出一个结论,taro3.4.11压根不存在打包一部分页面的命令!放弃这个思路,直接转向打包的过程分析。

任务1:单独打包一个页面

  • 经过研究,每次打包会默认去找项目根目录下的app.js当作入口文件,以及拿到app.config.js的配置,根据配置中的配置的页面路径去打包该内容,那么思路清晰,从app.config.js入手,通过修改页面路径配置打包成不同内容的包。这样做的话要不停的修改app.config.js,每次打包都需要改一个配置,比较麻烦 ,我们可以提前创建多组不同内容的app.config.js、app.js文件,根据打包环境去寻找对应的入口以及配置,即可实现。

仔细翻找文档并未出现修改入口文件位置的配置,这时候只能深入源码去寻找加载入口文件的方法,最终锁定位置:

Taro源码获取入口文件路径的方法

由于我们打包的是小程序,所以会加载 MiniPlugin 这个插件,其中方法 getAppEntry 可以清楚看到入口文件文件路径是从webpack配置的entry中的app这个属性中拿到的。

  • 根据以上分析,我通过修改entry属性重新指定入口文件路径,操作如下:

具体操作

  • 在config文件夹下创建一个新环境main.js,作为主分包打包配置文件,并重新指定入口文件路径,同时在package.json中为其添加启动命令:
// package.json

"scripts": {
	"pack-main": "taro build --type weapp --env main --blended"
 }
  • 同理,别的分包也这样操作。
  • 这里我又添加了一个sub环境,为其打包添加命令。
// package.json

"scripts": {
	"pack-main": "taro build --type weapp --env main --blended",
	"pack-sub": "taro build --type weapp --env sub --blended"
 }
  • 为了方便一次性打包多次再添加一条命令:
// package.json

"scripts": {
	"pack-main": "taro build --type weapp --env main --blended",
	"pack-sub": "taro build --type weapp --env sub --blended",
	"pack-all": "yarn run pack-main && yarn run pack-sub"
 }

以上,单独打包一个页面完成

任务2:chunkid冲突问题

执行完成上面的操作到小程序一看全是红色的报错,那一定时遇到chunkid冲突的问题。

  • 这点taro文档中有提到,给不同的环境添加不同的jsonpFuntion,操作如下:
    添加jsonpFuntion

经过九九八十一难最终顺利完成任务,实现Taro 项目拆分到多个分包。

总结

本次探索是毕业入职以来由理论迈向实践第一步,相信还会有第二步、第三步。

源码

后续

拆分完成后当然会有很多后续的惊喜等着我们,比如:状态管理不能共享 and so on …

留一些思考,下一篇再说吧!😘

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值