三方组件库在分包中使用的demo

[sendking]

方便新增一个使用三方组件库在分包中使用的demo吗，比如引入这个 https://wot-design-uni.cn/component/datetime-picker.html

[Vanisper]

哦哦，这个我还没具体测试过，我后续可以更新一个使用 ui 组件库的示例。

因为项目中一般都会选型一个组件库作为全局都需要使用到的依赖库，所以在小程序体系中，组件库通常都是作为主包的内容的。

除非你能完全避免主包使用这个组件库里面的组件。但是对于这个情况，目前我的理解，处理起来的话是一个新的挑战。因为组件库经过编译之后，产物是 wxml、wxss 之类的，和其他的依赖库不一样，其他的依赖库是纯 js 的产物，处理 js 的分包归属的操作，只需要统一打到这个分包的 vendor.js 文件就好了。但是 wxml 这类产物的迁移我还是第一次想到，后续会尝试处理。

---

对于 ”主包不会用到 ui 组件库“ 的这一个场景，我觉得把组件库单独 clone 下来放到子包的目录下面，完全被这个子包私有化，这是可行的。

但是这个操作不适合 ”主包不会用到 ui 组件库，但是多个子包引用了组件库“，”多个子包引用了组件库“ 的话，这个组件库按照现有的处理办法，这个组件库还是应该作为主包下的内容，这样才能兼顾多个子包，否则就是下面说到的方案。

---

我有思考过如何完全将一个 ui 组件库变成一个子包，通过 异步组件 的引入方式实现 ui 组件库不侵入主包，理论上这是可行的，就是利用本插件提供的 组件异步跨包引用 这个功能去实现。

但是这个操作的弊端就是（小程序下），这种组件的渲染是异步的，在真正渲染之前，是使用一个空的 view 标签作为占位的，也就是说渲染之前，这个组件的位置其实是会有一个短暂的空白的情况，可以理解为 组件的白屏（很短暂，但是肉眼可见，看个人的接受程度）。

我觉得这种方案不值当：

• 一个原因是因为 ui 组件库的组件可能是会被频繁使用到的（当然可能实际上并没有我想象到的那么频繁，所以这个这是我个人的担忧），这个时候，所有组件库的组件都采用了异步的方式引入，会大量、大面积导致组件白屏的问题，用户体验不好。当然我没测试过这个问题的实际效果。
• 还有一个原因是，单单的一个 ui 组件库压缩后的大小其实不过 500kb （你提到的这个 wot 组件库就是 400多kb），在我这个插件的 分包优化 的功能加持下，其实是能满足主包不超 2mb 的，当然前提是要做好分包的规划，我的原则是，只有小程序 tabbar 涉及到的页面模块才作为主包，其余的一律规划为分包。

---

说的有点多了哦，你这个话题正好点到了我之前思考过的问题，借此机会记录一下想法 😂，见谅。

[Vanisper]

其实就目前我上面说的那一大段话的结论而言，使用组件库的话就安安心心作为主包的内容就好了。

我目前的一个生产中的项目（比较复杂的），经过插件的优化后，主包稳定在 1.5mb，之前因为这个主包的 2mb 的限制，我主页本身有一个图表的展示的需求的，后面我不得不迁移到子包内了，如果我现在再放开这个图表展示到主包，我估计也会炸，因为echarts实在是太大了......

---

回归主题，如果我啥时候实现了 组件库的分包优化 这一个问题，我才会更新你的需要的 example，因为目前第三方组件库在项目中的定位就是作为主包的内容的，所以正常使用就好了，没有提供示例的必要。

[Vanisper]

或许你有什么困惑的地方，可以在这里提出来，如果能帮上忙的话，会尽可能解决的。

@sendking

[sendking]

感谢回复，这个库很棒

[haliuhei]

使用的uni-ui的组件的，还在想是不是因为不支持easycom，这也算是看到解答。