Taro 3 支持分包异步化吗？

[rayallen001]

这个特性解决了什么问题？

微信小程序提供了分包异步化的能力（https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html）, 期望 Taro 3 也有相应的功能

这个 API 长什么样？

import('../commonPackage/index.js').then(pkg => { pkg.getPackageName() // 'common' })

[Thinking80s]

同问

[Chen-jj]

@rayallen001 @Thinking80s 看了下这是微信小程序的能力，Taro 无需兼容，应该直接使用即可。

【跨分包自定义组件引用】配置类的能力，应该可以直接使用。

【跨分包 JS 代码引用】import 会被 Webpack 解析，可以使用微信小程序文档中的 require 写法试试。

[rayallen001]

@Chen-jj 如果直接使用微信小程序的能力，那么【跨分包自定义组件引用】应该只能跨分包使用微信原生组件，我期望的是能够跨分包使用 Taro React 组件

[AndyQsmart]

同问，如何使用分包异步化，我现在主包有引用了一个Taro React组件，体积太大，希望放到分包中，然后其他分包进行引用。或者一些通用的JS文件感觉也可以放到一些分包中，这样可以减少主包的大小。但是使用require后会被webpack转义了，而且那个组件该用什么名称进行引用。

[broven]

+1

[Chen-jj]

置类的能力，应该可以直接使用。

【跨分包 JS 代码引用】import 会被 Webpack 解析，可以使用微信小程序文档中

使用 __non_webpack_require__ 代替 require 试试，它应该不会被 Webpack 解析

[chengandpeng]

置类的能力，应该可以直接使用。 【跨分包 JS 代码引用】import 会被 Webpack 解析，可以使用微信小程序文档中

使用 __non_webpack_require__ 代替 require 试试，它应该不会被 Webpack 解析

你好，我想通过subPackages分包一个功能模块（非页面）

但是分包配置中js(ts)文件，会被强制转化成页面形式的4个文件，导致通过异步去取得时候只能拿到一个空值 const res = await __non_webpack_require__.async("../../subpackage/pages/index"); // res = {}

请问可以维持分包代码不变么？ #11158

[AndyQsmart]

置类的能力，应该可以直接使用。 【跨分包 JS 代码引用】import 会被 Webpack 解析，可以使用微信小程序文档中

使用 __non_webpack_require__ 代替 require 试试，它应该不会被 Webpack 解析

你好，我想通过subPackages分包一个功能模块（非页面）

但是分包配置中js(ts)文件，会被强制转化成页面形式的4个文件，导致通过异步去取得时候只能拿到一个空值 const res = await __non_webpack_require__.async("../../subpackage/pages/index"); // res = {}

请问可以维持分包代码不变么？ #11158

请问你最后是通过配置了splitChunk然后解决了吗

[chengandpeng]

置类的能力，应该可以直接使用。 【跨分包 JS 代码引用】import 会被 Webpack 解析，可以使用微信小程序文档中

使用 __non_webpack_require__ 代替 require 试试，它应该不会被 Webpack 解析

你好，我想通过subPackages分包一个功能模块（非页面） 但是分包配置中js(ts)文件，会被强制转化成页面形式的4个文件，导致通过异步去取得时候只能拿到一个空值 const res = await __non_webpack_require__.async("../../subpackage/pages/index"); // res = {} 请问可以维持分包代码不变么？ #11158

请问你最后是通过配置了splitChunk然后解决了吗

是的

[molunhui]

置类的能力，应该可以直接使用。 【跨分包 JS 代码引用】import 会被 Webpack 解析，可以使用微信小程序文档中

使用 __non_webpack_require__ 代替 require 试试，它应该不会被 Webpack 解析

你好，我想通过subPackages分包一个功能模块（非页面）

但是分包配置中js(ts)文件，会被强制转化成页面形式的4个文件，导致通过异步去取得时候只能拿到一个空值 const res = await __non_webpack_require__.async("../../subpackage/pages/index"); // res = {}

请问可以维持分包代码不变么？ #11158

我也是用splitChunk将功能模块打包到一个js文件；但是使用__non_webpack_require__.async拿到的是一个空对象；请问你怎么处理的？上面提供的仓库已被删除

[chengandpeng]

我是参考 https://docs.taro.zone/docs/taro-in-miniapp#%E5%AF%B9-taro-%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%83%A8%E5%88%86%E9%A1%B5%E9%9D%A2%E5%88%86%E5%8C%85 通过splitChunks把文件拆出去，然后addChunkPages引入到页面里，业务代码直接import就行了

[molunhui]

我是参考 https://docs.taro.zone/docs/taro-in-miniapp#%E5%AF%B9-taro-%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%83%A8%E5%88%86%E9%A1%B5%E9%9D%A2%E5%88%86%E5%8C%85 通过splitChunks把文件拆出去，然后addChunkPages引入到页面里，业务代码直接import就行了

这样只是在同一个包下可以直接import进来吧？不同分包下不行吧

[chengandpeng]

我是参考 https://docs.taro.zone/docs/taro-in-miniapp#%E5%AF%B9-taro-%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%83%A8%E5%88%86%E9%A1%B5%E9%9D%A2%E5%88%86%E5%8C%85 通过splitChunks把文件拆出去，然后addChunkPages引入到页面里，业务代码直接import就行了

这样只是在同一个包下可以直接import进来吧？不同分包下不行吧

如果你在主包引入的话，分包也是可以使用的。或者在addChunkPages里加入分包的页面

[molunhui]

我是参考 https://docs.taro.zone/docs/taro-in-miniapp#%E5%AF%B9-taro-%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%83%A8%E5%88%86%E9%A1%B5%E9%9D%A2%E5%88%86%E5%8C%85 通过splitChunks把文件拆出去，然后addChunkPages引入到页面里，业务代码直接import就行了

这样只是在同一个包下可以直接import进来吧？不同分包下不行吧

如果你在主包引入的话，分包也是可以使用的。或者在addChunkPages里加入分包的页面

问题是主包及其他分包能异步引用这个放在分包中拆出来的模块，返回的是一个空对象

[chengandpeng]

我是参考 https://docs.taro.zone/docs/taro-in-miniapp#%E5%AF%B9-taro-%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%83%A8%E5%88%86%E9%A1%B5%E9%9D%A2%E5%88%86%E5%8C%85 通过splitChunks把文件拆出去，然后addChunkPages引入到页面里，业务代码直接import就行了

这样只是在同一个包下可以直接import进来吧？不同分包下不行吧

如果你在主包引入的话，分包也是可以使用的。或者在addChunkPages里加入分包的页面

问题是主包及其他分包能异步引用这个放在分包中拆出来的模块，返回的是一个空对象

那可能你要看下是不是写的配置有问题了，然后看下编译出的dist文件夹下的对应page开头有没有require你拆出来的模块

[molunhui]

我是参考 https://docs.taro.zone/docs/taro-in-miniapp#%E5%AF%B9-taro-%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%83%A8%E5%88%86%E9%A1%B5%E9%9D%A2%E5%88%86%E5%8C%85 通过splitChunks把文件拆出去，然后addChunkPages引入到页面里，业务代码直接import就行了

这样只是在同一个包下可以直接import进来吧？不同分包下不行吧

如果你在主包引入的话，分包也是可以使用的。或者在addChunkPages里加入分包的页面

问题是主包及其他分包能异步引用这个放在分包中拆出来的模块，返回的是一个空对象

那可能你要看下是不是写的配置有问题了，然后看下编译出的dist文件夹下的对应page开头有没有require你拆出来的模块

我感觉我们讨论的不是同一个问题了😂；

[airqj]

时隔几个月 这个问题有解决方案吗

[jamninetyfive]

我是参考 https://docs.taro.zone/docs/taro-in-miniapp#%E5%AF%B9-taro-%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%83%A8%E5%88%86%E9%A1%B5%E9%9D%A2%E5%88%86%E5%8C%85 通过splitChunks把文件拆出去，然后addChunkPages引入到页面里，业务代码直接import就行了

这样只是在同一个包下可以直接import进来吧？不同分包下不行吧

如果你在主包引入的话，分包也是可以使用的。或者在addChunkPages里加入分包的页面

问题是主包及其他分包能异步引用这个放在分包中拆出来的模块，返回的是一个空对象

那可能你要看下是不是写的配置有问题了，然后看下编译出的dist文件夹下的对应page开头有没有require你拆出来的模块

能分享下你的实现吗

[jamninetyfive]

我是参考 https://docs.taro.zone/docs/taro-in-miniapp#%E5%AF%B9-taro-%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%83%A8%E5%88%86%E9%A1%B5%E9%9D%A2%E5%88%86%E5%8C%85 通过splitChunks把文件拆出去，然后addChunkPages引入到页面里，业务代码直接import就行了

这样只是在同一个包下可以直接import进来吧？不同分包下不行吧

你解决了么

[wowhy]

用webpack拆分和 non_webpack_require.async 暂时是解决了分包异步化的问题。只要在开启页面之前能够预先调用 non_webpack_require.async 就可以保证import的组件能够使用了

webpack配置

路由跳转时加载异步分包

[SuperSaiyr]

用webpack拆分和non_webpack_require .async 暂时是解决了分包异常化的问题。只要在启动页面之前能预调先用non_webpack_require .async就可以委托代理导入的组

webpack配置

·由跳转时加载异步分包

你这样没有用吧, 模块实际上还是在主包里面

[pfx443212345]

同问，如何使用分包异步化，我现在主包有引用了一个Taro React组件，体积太大，希望放到分包中，然后其他分包进行引用。或者一些通用的JS文件感觉也可以放到一些分包中，这样可以减少主包的大小。但是使用require后会被webpack转义了，而且那个组件该用什么名称进行引用。

有同样的需求，您这边有方案了吗？

[pfx443212345]

我是参考 https://docs.taro.zone/docs/taro-in-miniapp#%E5%AF%B9-taro-%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%83%A8%E5%88%86%E9%A1%B5%E9%9D%A2%E5%88%86%E5%8C%85 通过splitChunks把文件拆出去，然后addChunkPages引入到页面里，业务代码直接import就行了

这样只是在同一个包下可以直接import进来吧？不同分包下不行吧

如果你在主包引入的话，分包也是可以使用的。或者在addChunkPages里加入分包的页面

如果我主包不引用，就分包 A 引用这个拆出来的分包 B 呢？（分包 B 就单独的功能js库）

[pfx443212345]

同问，如何使用分包异步化，我现在主包有引用了一个Taro React组件，体积太大，希望放到分包中，然后其他分包进行引用。或者一些通用的JS文件感觉也可以放到一些分包中，这样可以减少主包的大小。但是使用require后会被webpack转义了，而且那个组件该用什么名称进行引用。

有同样的场景需求，请问大佬有解决方案了吗？望不吝赐教

[sjhleo]

同问，taro3能支持异步分包么，1.x还能够用，3.x貌似由于编译机制不行了啊

[ihengshuai]

由于不支持异步分包，在项目中我自定义脚本来处理异步分包，可以参考这个项目 https://github.com/ihengshuai/taro-vue3-skeleton