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

最新推荐文章于 2024-07-09 21:42:31 发布

飞飞的小歪

最新推荐文章于 2024-07-09 21:42:31 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： taro 前端 javascript 混合现实

本文链接：https://blog.csdn.net/SwingDance/article/details/126501608

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

实现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"
 }