uniapp微信小程序之分包异步化之组件分包

最新推荐文章于 2025-05-28 10:01:31 发布
最新推荐文章于 2025-05-28 10:01:31 发布
阅读量3.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 小程序 移动端开发 文章标签： uni-app 微信小程序 小程序 分包异步化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jie_rookie/article/details/133745663
本文详细介绍了uni-app微信小程序中组件分包异步化的重要性和解决的问题，包括主包空间不足和访问速度优化。同时，针对开启组件分包异步化过程中遇到的占位组件配置、$refs访问报错和多分包组件互相调用等问题，提出了具体的解决方案，如正确配置componentPlaceholder，延迟$refs访问，以及两种不同的组件互相调用策略。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、组件分包异步化解决的问题

  1. 日渐增加的通用组件造成的主包空间不足；

  2. 提升小程序访问速度，降低白屏率；

二、开启组件分包异步化过程中遇到的问题

  1. 如何进行占位组件配置；

  2. 如何解决通过$refs访问异步组件报错；

  3. 如何判断所有异步组件都已加载完毕；

  4. 多分包组件之间互相调用如何配置；

  • 占位组件配置

        直接在页面路由配置文件pages.json中对应调用异步组件的页面配置style中配置对应的componentPlaceholder，uniapp编译成微信小程序时会将componentPlaceholder同步到页面json配置中。

例如：

  "pages": [
    {
      "path": "pages/index/index",
      "name": "index",
      "st
最低0.47元/天 解锁文章

200万优质内容无限畅学
uniapp 微信小程序异步调用分包的自定义组件
liuye066的专栏
05-10 1467
在微信开发者工具的模拟器上测试，能调用成功，显示正常，但真机调试时，组件不显示，控制台报错Component is not found in path "subTaixin/measureHeart/moreFun" (using by "pages/index/index")；需求：在分包subTainxin中创建自定义组件moreFun.vue，需要在主包的pages/index/index页面调用该自定义组件。2.1 在pages/index/index.vue中。上传到体验版上，扫码测试时又正常。
uniapp微信小程序之分包异步化
qq_35378569的博客
12-17 1866
uniapp开发微信小程序开发完功能之后，发现项目大小超过了2M不能发布，确实是一件令人头疼的时候，下面我将使用分包+异步化方案来解决这个问题。
uniapp：主包引用子包中的组件，报错：may be missing corresponding “componentPlaceholder“ option?
最新发布
weixin_51410591的博客
05-28 464
在uniapp中，主包的页面需要引用子包中的组件时，需要在page.json中相关主包页面下进行子包组件名称的配置，如下图：
uniapp 异步组件
LJJONESEED的博客
08-09 1641
uniapp 异步组件。
uni-app 微信小程序分包
Gewenjuan_0309的博客
05-21 319
1.pages.json 文件中设置分包，配置项:"subPackages"，注意tabbar页面，只能放在主包。"optimization":{"subPages":true}，启用分包。3.manifest.json文件中。2.pages.json文件中。
微信小程序分包异步化，分包之间可以互相使用自定义组件
LRQQHM的博客
02-18 1360
data() {return {},mounted(){},methods:{
uniapp分包异步化是操作
cheneab1的博客
12-04 684
虽然存在着部分问题，但是我们依然可以将部分业务组件分离到分包中，然后使用跨包组件，从而减少主包的体积，在我这个项目中我对接的腾讯云IM就是通过这种形式，将消息列表对接到tabbar中，否则按照以往的经验这一部分肯定占据主包大量的空间。(1) 在分包未加载完成之前，该组件为占位组件，如果是view，text等基础组件，则slots的内容会直接显示出来，影响用户体验。配置之后，我们就可以在页面中正常使用了，对应的slots、props、events的传递在分包加载进来之后便可以正常响应。
小程序：使用分包异步化解决一个分包引入另一个分包的组件/函数的问题
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
02-28 9184
小程序使用分包异步化解决一个分包引入另一个分包的组件/函数的问题
uniapp使用分包异步化后uview2出现object,object的解决办法
u011647720的博客
09-19 906
niapp现在已经支持了在subPackages里使用分包异步化，u-input输入时候无法正常显示，出现object,object的问题
uniapp 小程序封装异步（get/post/delete/put）共用
Ambitiouss的博客
09-18 5598
提出前景： 最开始学编程的时候呢，不知道写了多少重复代码....哈哈 嘲讽一下。后来出来上班了，前端架构师有要求。尽量压缩代码。 写好注释（因为一个人不可能一辈子只待在一个企业，这样的话有助于后来同事接手，和一个平台的稳定性）。这些观点非常 认同。 提出前问题： 以上呢，公司用的是jquery，而小程序和vue也是这段时间学习。对我来说，刚学一种语言就要提出他的公共部分对我是有难 度的（不知道语...
uni-app小程序分包
weixin_57605398的博客
06-11 343
uni-app小程序分包 1.在pages同层级下新建文件夹 2.在uniapp.json中声明subpackages字段进行分包操作如下图： { "pages": [ "pages/home/index", "pages/promote/index", "pages/partner/index/index", "pages/my/index", "pages/login/wxmp" ], "subp
uni-app 里面placeholder父组件 → 子组件传值（父向子传值）
欢迎来到我的频道~
03-18 4159
子组件： （1） （2）子组件 通过props的方法，接受父组件传的placeholder props:['placeholder'] 父组件： （1）引入子组件 （2）页面加载的时候，将placeholder传给 子组件 <script> export default{ data(){ return{ ...
解决uniapp Prop being mutated: "placeholder"报错
ten_yearM的博客
05-06 5771
想要解决的问题：封装一个组件A，组件A的placeholder有默认值，但又有几处需要从父组件传入自定义值，即想要父组件有传值时使用父组件，没有传值使用默认（默认有分情况或者使用语言包，‘default’用不了），本文不解决Prop双向绑定。 报错信息： Avoid mutating a prop directly since the value will be overwritten whene...
UNI-APP 分包使用(详解与实战)
码海扬帆：前端探索之旅的博客
03-02 3091
4、在pages.json中创建"subPackages"数组，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成（参数同pages）；js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用。自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息。
uni-app开发日志[2022022701]：解决因异步原因导致子组件调用父组件中uni-form表单验证事件时发生的错误及uniform、promise、async、await的同步异步使用注意点
暂时先用这个名字
02-27 4656
uni-form是uniapp官方组件，其中表单验证部分使用异步方式，这样当子组件调用父组件的验证事件时，该验证事件将排在最后执行从而导致无法获得正确验证结果。解决这个问题需要结合表单验证、同步异步、promise、catch、then、async、await等内容。
Uniapp自定义Input组件 - 可控制字体的Placeholder效果
weixin_39187115的博客
12-21 665
r-inputplaceholder="自定义样式"/>
uniapp开发：小程序分包后，主包无法调用分包页面作为组件BUG
m0_70022446的博客
04-03 1055
第一次在开始写的时候没注意好好看文档，导致在配置和新增componentPlaceholder字段的时候key写成了我主包页面自己注册的component名，导致卡了很久。首先从报文看是因为没有找到文件位置，提示缺少响应的“componentPlaceholder”，而这个字段则用于指定的站位组件。配置结束后，依旧在pages.json中找到需要调用组件的页面，然后配置报文中的componentPlaceholder字段。想要让分包里的页面作为组件让主包使用的话，首先要在使用页面预加载分包。
【愚公系列】2022年02月 微信小程序-app.json配置属性之subpackages和preloadRule
热门推荐
时光隧道
02-22 3万+
文章目录一、app.json配置属性之subpackages和preloadRule1.subpackages2.preloadRule二、小程序普通分包配置1.打包原则2.引用原则三、小程序独立分包配置四、小程序分包预加载配置五、分包异步化1.跨分包自定义组件引用2.跨分包 JS 代码引用 一、app.json配置属性之subpackages和preloadRule 1.subpackages 分包的功能主要是实现小程序按需加载，进入分包页面才会进行分包的加载。 在构建小程序分包项目时，构建会输出一个或
微信小程序、uniapp开发小程序组件和uni_modules分包到子包中
m0_49407241的博客
03-28 9952
大家在uniapp开发微信小程序项目中难免会遇到主包体积过大，导致上传不了。这一直都是很头痛的问题。下面就讲一下我最近在项目中遇到的问题。因为创建项目的时候没有考虑那么多因素只考虑到了简单的分包。这个是没有满足项目变大的因素。
微信小程序componentPlaceholder参数
06-02
微信小程序中的componentPlaceholder参数是用于在自定义组件加载时显示的占位符。当自定义组件还未加载完成时，可以通过设置componentPlaceholder参数来显示一个占位符，以提高用户体验。 componentPlaceholder参数是在自定义组件的json文件中进行设置，例如： ``` { "component": true, "usingComponents": {}, "componentGenerics": {}, "options": { "multipleSlots": true, "addGlobalClass": true, "componentPlaceholder": { "show": true, "style": { "backgroundColor": "#f5f5f5" } } } } ``` 其中，componentPlaceholder对象中的show属性用于控制占位符的显示与隐藏，style属性用于设置占位符的样式。可以根据具体需求进行设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值