uniapp pages.json中分包的处理

uniapp在实现多端打包的情况下,由于小程序的打包限制大小,因此前期会提前做好分包

好处:

  1. 小程序的分包,除了联网分段下载外,还可以减轻启动时加载的js数量,可以提升启动速度。
  2. 从uni-app 2.7.12+ 开始,App-vue平台也兼容了小程序的分包配置,但默认并不开启。

在manifest配置以下节点,可以在App端启动分包。
在这里插入图片描述

启用之后,就需要在pages.json中配置具体的分包规则(与小程序的配置相同),注意:就是一旦在pages.json里配置分包,小程序一定生效,而app是否生效,取决于manifest里是否开启。
官网中的一些注意事项:

  • App开启分包后,每个分包单独编译成一个js文件(都包含在app内,不会联网下载),当App首页是vue时,可减小启动加载文件大小,提升启动速度。
  • 首页是nvue时,分包不会提升启动速度,nvue本身启动速度就快于vue,也快于开启分包后的首页为vue的应用。如果追求极致启动速度,还是应该使用nvue做首页并在manifest开启fast模式。
  • App页面较少时,分包对启动速度的优化不明显

分包加载配置subPackages
参照官网的:假设分包的uniapp目录如此:
在这里插入图片描述
pages.json中代码配置:

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ...}
    }, {
        "path": "pages/login/login",
        "style": { ...}
    }],
    "**subPackages**": [{
        "root": "pagesA",
        "pages": [{
            "path": "list/list",
            "style": { ...}
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }],
    "preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }
}

不同的目录将根目录抽出,作为一个包的根目录,然后将其子目录放到pages数组对象中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值