小程序分包方法

1、 图片上云
2、 删除不用的代码、函数和文件
3、 只有子包需要的接口移到子包中
4、 代码复用。效果不明显,实现两个页面复用一个大组件,可减少10kB大小
5、 还未实践见到效果的备选方案:把node_modules、uni_modules(在微信开发者工具的依赖分析看项目依赖这两个目录中的哪些组件)组件文件放到子包里,将主包所依赖的组件文件从子包里引用出来。参考链接:对uni_modules进行分包处理 微信小程序、uniapp开发小程序组件和uni_modules分包到子包中
6、 一剂猛药:备份依赖脚本,把依赖关系不明显的脚本全删了,之后项目报错,还需要哪些脚本,再恢复回来。(方法2、3和5都是践行该思想)

方法5的实例(通过将主包不需要的uni_modules中的组件移到子包来完成分包)

发现只有page_mine(子包)的页面使用uni-easyinput组件,把这个组件移到page_mine目录下的uni_modules目录中。

page_mine的其中一个页面login.vue,依赖部分加上import UniEasyinput from '@/page_mine/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'(vue3写法),子包就用到子包中的组件

但是uni-easyinput还依赖uni-icons,因为uni-icons也不是主包会用的组件,把uni-icons目录也移到page_mine/uni_modules中

但是uni-easyinput是用vue2写的,需要通过vue2的方式自定义地引入uni-icons,在uni-easyinput.vue的依赖引入部分加上import UniIcons from '../../../uni-icons/components/uni-icons/uni-icons.vue';,在export default {}中加上components: { UniIcons },,这样uni-easyinput能使用自定义的uni-icons组件

因为我觉得uni-scss组件是基础组件,故uni-easyinput所依赖的uni-scss组件仍放在项目的src/uni_modules目录中,放在这个目录中的组件默认被项目直接使用,不需要考虑引入的问题(还需要研究如何自动引入依赖)

参考链接:
对uni_modules进行分包处理

微信小程序、uniapp开发小程序组件和uni_modules分包到子包中

vue2 父组件引入子组件

创建于2509150949,修改于2509231614

posted @ 2025-09-15 09:50  园糯  阅读(26)  评论(0)    收藏  举报