申请支持微信小程序分包异步化

[huadong]

微信小程序推出了分包异步化（官方指引）的功能，异步分包将能大大降低主包尺寸的压力。

估计其实现对vue体系来说是个不小的挑战，希望大神们能出手。

如同推出easycom一样。

[huadong]

提交了一个PR，支持componentPlaceholder配置，望采纳。

[huadong]

期待PR（#2936） review反馈

Day 5

[huadong]

期待PR（#2936） review反馈

Day 5

Day 6

[fxy060608]

异步分包将能大大降低主包尺寸的压力 尺寸问题，普通分包就解决了吧，异步主要是解决不同分包之间互相引用

[huadong]

当项目达到一定的规模，普通分包已经无法解决主包过大问题：

1. 多个分包公用的组件常会挪到主包维护，导致主包尺寸增加，不然就得把同一个组件拷贝到多个分包。
2. 微信小程序插件可以从主包移到分包引入，但同一个插件只能在一个分包引入，这会导致其它分包无法使用该插件，除非把该插件放到主包引入，但这又会增加主包尺寸。（比如引入echart最小也600k）
3. 还有其它一些js模块依赖问题会导致代码编译到主包，增大主包尺寸。
4. 一般主包引入一个UI库 + 公用组件 + 公用JS模块 + 其它一些依赖库，2M的容量所剩无几了，尤其在UNIAPP的开发框架下。

微信新推出这个能力正好能解决上述问题，比增大主包尺寸要灵活、强大很多，应该是经过推敲的。理论上可以通过巧妙的代码依赖设计，充分用好20M的总包尺寸。

[fxy060608]

当项目达到一定的规模，普通分包已经无法解决主包过大问题：

1. 多个分包公用的组件常会挪到主包维护，导致主包尺寸增加，不然就得把同一个组件拷贝到多个分包。
2. 微信小程序插件可以从主包移到分包引入，但同一个插件只能在一个分包引入，这会导致其它分包无法使用该插件，除非把该插件放到主包引入，但这又会增加主包尺寸。（比如引入echart最小也600k）
3. 还有其它一些js模块依赖问题会导致代码编译到主包，增大主包尺寸。
4. 一般主包引入一个UI库 + 公用组件 + 公用JS模块 + 其它一些依赖库，2M的容量所剩无几了，尤其在UNIAPP的开发框架下。

微信新推出这个能力正好能解决上述问题，比增大主包尺寸要灵活、强大很多，应该是经过推敲的。理论上可以通过巧妙的代码依赖设计，充分用好20M的总包尺寸。

该功能跨平台的话，似乎比较困难，还需要评估一下

[huadong]

是的，毕竟是微信刚推出的新特性，算是非常底层和实用的框架支持了。

我提交的PR改得也非常小心，除了公共类的cache代码外'packages/uni-cli-shared/lib/cache. js'，其它都是微信的webpack loader代码，实现微信小程序的代码和配置翻译。再有就是vue component option的配置命名了，目前选用了和微信小程序一样的命名，因为不知道其它平台会如何跟进。但对小程序来说，也就微信雄霸一方了。

[huadong]

微信小程序用的shadow-dom和不支持scope slot，让一切变得非常特殊，尤其对UI组件来说，样式穿透、节点关系等都不太一样，还有组件循环嵌套等。

有赞的VANT UI也不得不专门写了一套vant-weapp，我把它迁移到uniapp的框架体系，命名为iox ui，尽管加上了uniapp的预编译宏指令，依然难以完美兼容像支付宝之类的小程序。

提取平台的共性，同时支持平台的特性确实是个纠结而了不起的工作。

期望能尽早支持微信的分包异步化特性，包尺寸放大了确实能让小程序设计得更加强大。

[huadong]

该功能跨平台的话，似乎比较困难，还需要评估一下

@fxy060608 评估得怎么样了，是否能接纳PR的实现方式？

按UNIAPP的发布周期，接纳并测试发布，也得一个月之后了。

[fxy060608]

该功能跨平台的话，似乎比较困难，还需要评估一下

@fxy060608 评估得怎么样了，是否能接纳PR的实现方式？

按UNIAPP的发布周期，接纳并测试发布，也得一个月之后了。

目前正在处理 vue3 小程序迁移到vite，等vue3相关工作结束后，可以考虑实现组件的跨分包使用，我大概看了下这个PR，目前似乎没有考虑vue3，可以再评估下，是否可以设计一套更容易兼容vue2,vue3的定义方式，以及如何兼容其他平台，如果兼容不了，只能开发者自行条件编译区分？

[huadong]

目前正在处理 vue3 小程序迁移到vite，等vue3相关工作结束后，可以考虑实现组件的跨分包使用，我大概看了下这个PR，目前似乎没有考虑vue3，可以再评估下，是否可以设计一套更容易兼容vue2,vue3的定义方式，以及如何兼容其他平台，如果兼容不了，只能开发者自行条件编译区分？

谢谢回复！腾讯的分包异步化确实是个很聪明的做法，也是前端开发很成熟的技术了。

当前未考虑到vue3，目前适合vue2，用于uniapp 2.x。比较羡慕那些没有公共组件负担、或者已经完成自身组件库升级的同学，能直接上vue3。vue2到vue3在工程上是个漫长的过程。

我稍后会建一个patch工程，稍后发布到github上，供临时有需要的同学共享。

[huadong]

创建了一个patch工程，地址为：https://github.com/huadong/uniapp-patch

patch相关联的PR和issue：#2949 #2936 #1383

• 增强Tree shaking优化 patches/@dcloudio+vue-cli-plugin-uni+2.0.0-32920210927002.patch

• 支持微信小程序分包异步化(仅限组件) patches/@dcloudio+uni-cli-shared+2.0.0-32920210927002.patch patches/@dcloudio+webpack-uni-mp-loader+2.0.0-32920210927002.patch

• 增强externalClasses继承 patches/@dcloudio+uni-mp-weixin+2.0.0-32920210927002.patch

• 解决@dcloudio/types定义的小问题 patches/@dcloudio+types+2.5.12.patch

[lbb00]

@fxy060608 借题问一下，uni next版本目前有发布时间的预期么

[fxy060608]

@fxy060608 借题问一下，uni next版本目前有发布时间的预期么

目前小程序vite版本已经在内部测试，测试完成后，就会对外发布alpha版本，预计这2周左右就会发布

[zydemail]

@huadong 麻烦大神看下这个https://github.com/huadong/weapp-subpackages-optimization/issues/1 ，我本地运行没有实现分包异步化的效果，我提了issue,谢谢~

[zydemail]

@huadong 遇到2个问题： 1）ts版本加上componentPlaceholder，编译后公共组件依然被打入主包 @Component({ componentPlaceholder: { 'xTest': 'view' } })

2）js版本加上componentPlaceholder，编译后没有生成components文件，但是注释掉componentPlaceholder配置就能编译出来components文件 components: { xTest, }, componentPlaceholder: { 'xTest': 'view' }, 能否开通仓库权限给我提交分支，帮忙看下为啥公共组件还是会被打入主包呢

[zydemail]

@huadong 这个patch目前仅支持easycom的components，能否向下兼容支持下旧版本呢

[zydemail]

@huadong 这个patch仅支持easycom的component可以支持分包异步化，自己import进来的组件根本不编译，导致找不到组件

[huadong]

@huadong 这个patch仅支持easycom的component可以支持分包异步化，自己import进来的组件根本不编译，导致找不到组件

建一个重现工程看看。

[zydemail]

@huadong 这个patch仅支持easycom的component可以支持分包异步化，自己import进来的组件根本不编译，导致找不到组件

建一个重现工程看看。

@huadong https://github.com/zydemail/componentPlaceholder 这是我在你的demo基础上新建的工程 1）分包异步化不支持import引入的组件，我已经定位到原因：执行babelGenerate后webpack编译模板时没有了import组件那段代码，导致微信开发者工具报错,注释掉就行了 2）现在又发现了新的问题，引入的子组件如果使用ref调用子组件的函数让组件显隐，在微信开发者工具里报错，定位代码：@dcloudio\uni-mp-weixin\dist\index.js，麻烦大神看下我的demo工程，本地是可以复现，我新加了一个tabbar组件，谢谢~

[yuhongshuai]

异步分包将能大大降低主包尺寸的压力 尺寸问题，普通分包就解决了吧，异步主要是解决不同分包之间互相引用

公共的组件 和 公共的js文件，都会被放到主包里，主包就已经很大了； 小程序出的包和包直接都可以相互异步调用，是明显的更好做法；期待官方跟进这一重要特性。

[SuperJolly]

可以先将 require 替换为 __non_webpack_require__来异步引入，目前微信开发者工具客户端Stable 1.06.2208010 及以下版本可以用

[kinsprite]

我也在项目中实现了 JS异步化、组件异步化 —只支持 Vue2 + mp-weixin。动了webpack构建与runtime，JS可以使用 import()，Vue组件使用同步import。 Placeholder组件是使用 json 文件定义。

DEMO: https://github.com/kinsprite/uni-vue2-js-async-mp-weixin

PS：看楼主的PR都放了两年，需要考虑支持Vue3 和 其他端，提PR验证的时间也好长。 Vue组件支持 import() , 也研究出来了。但是这种包含fix uni js 的方案不好做 demo。

[Otto-J]

感谢反馈，尤其是提供了可复用的代码逻辑、提交了PR。

看 fxy 的回复，当时的考虑风险点有两个

• 提交 PR 时候处在 vue2 - vue3 重构的时间节点
• uni-app 对新增的特性会考虑其他小程序平台和 h5/app 平台的一致性

近期在重新 review 一些历史问题和 PR，有进展会在本 issues 更新。

[zerobin]

@Otto-J 请问有进展吗？主包+分包已经解决不了主包超2m的问题，现在考虑采用这种分包异步化方式来解决

[zerobin]

我也在项目中实现了 JS异步化、组件异步化 —只支持 Vue2 + mp-weixin。动了webpack构建与runtime，JS可以使用 import()，Vue组件使用同步import。 Placeholder组件是使用 json 文件定义。

DEMO: https://github.com/kinsprite/uni-vue2-js-async-mp-weixin

PS：看楼主的PR都放了两年，需要考虑支持Vue3 和 其他端，提PR验证的时间也好长。 Vue组件支持 import() , 也研究出来了。但是这种包含fix uni js 的方案不好做 demo。

@kinsprite package.json中的fix:uniapp 是做什么的，替换原生uniapp 文件？

[Tinolee615]

@Otto-J 请问有进展吗？主包+分包已经解决不了主包超2m的问题，现在考虑采用这种分包异步化方式来解决

等的话太久了，就自己弄了一个，你可以参考一下 https://github.com/Tinolee615/uni-asynchronous-subcontracting