DDante
DDante
  • 发布:2022-11-07 17:59
  • 更新:5 天前
  • 阅读:255

uniapp 开启分包异步化(组件、JS 代码)

分类:uni-app

小程序基础库 2.11.2 开始支持分包异步化
如果要在分包中使用另一个 分包的组件(或者提取的公共组件, 异步化)就需要在小程序源码的 .json 中配置 "componentPlaceholder" 选项启用异步组件占位
但是 uniapp 官方并没有给予配置该选项的示例/方案,因为使用的 Vue,这也是开发过好几次小程序后一直以来为了解决主包 vender 过大问题之一
一直想做组件异步化,把公共组件提到单独分包进行管理,但一直未实现
前段时间搜索到一老铁的文章给我带来了灵感
我也在该文章上分享了我的解决方案
我们可以在需要使用公共组件的组件中导入该组件,然后在 pages.json 路由配置中的 style 字段填写组件占位选项
因为打包后观察 style 中的选项会被合并到小程序组件 .json 配置文件中,由此我们可直接在这个 pages.json 的 style 中进行配置即可

示例:

{  
    "path": "medical-service/index",  
    "name": "basic-medical-service",  
    "meta": {},  
    "style": {  
        "navigationStyle": "custom",  
        "componentPlaceholder": {  
            "simple-clinic-card": "view", // 配置组件名占位即可  
            "guidance-info": "view",  
            "quick-guide": "view"  
        }  
    }  
}
0 关注 分享

要回复文章请先登录注册

m***@126.com

m***@126.com

回复 m***@126.com :
找到了,在页面的json下,不是app.json下
5 天前
m***@126.com

m***@126.com

这个componentPlaceholder 在打包的时候 会被过滤掉 并不会出现
5 天前
DDante

DDante (作者)

本文案例是配置了 uni-simple-router 的,所以示例中出现了路由名称的配置
2023-01-06 16:43
DDante

DDante (作者)

回复 1***@qq.com :
不需要,按照示例上使用即可,组件里面使用到其他分包的组件时直接 import 就行了,这个分包只针对于小程序需要单独处理,需要配置 componentPlaceholder,但是 uniapp 无法直接配置,社区上有其他开发者使用 node 去替换打包后的 .json 中的配置,那样也行,但是麻烦,这种 hack 的方法更简洁
2023-01-05 16:37
1***@qq.com

1***@qq.com

组件的情况是要在page.json里面将对应的路由也写上去?这个有实际应用吗?
2022-12-15 09:32