小程序基础库 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"
}
}
}
如果你也是想使用公共组件一个分包的方案,在 pages.json 如下配置
{
"root": "components",
"pages": [{ "path": "index" }]
}
该 components 文件夹下必须要包含 index.vue,也就是说必须包含上面 pages 中的一个页面地址才可以使用,该 index,vue 里面填入以下模版
<template><view /></template>