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数组对象中

UniApp,可以使用分包功能来将应用的代码和资源按需加载,以提高应用的启动速度和性能。下面是UniApp如何进行分包的介绍: 1. 在项目的根目录下创建一个名为`subPackages`的文件夹,用于存放分包的相关配置文件和代码。 2. 在`subPackages`文件夹下创建一个名为`subpackage1`的文件夹,用于存放分包1的代码和资源。 3. 在`subpackage1`文件夹下创建一个名为`pages`的文件夹,用于存放分包1的页面。 4. 在`subpackage1`文件夹下创建一个名为`package.json`的文件,用于配置分包1的相关信息。示例配置如下: ```json { "name": "subpackage1", "root": "pages/subpackage1", "pages": [ "index", "detail" ] } ``` 其,`name`表示分包的名称,`root`表示分包的根目录路径,`pages`表示分包需要加载的页面列表。 5. 在主包的`pages.json`文件配置分包的引用。示例配置如下: ```json { "pages": [ "pages/index", "pages/subpackage1/index" ], "subPackages": [ { "root": "subPackages/subpackage1", "pages": [ "index", "detail" ] } ] } ``` 其,`pages`表示主包需要加载的页面列表,`subPackages`表示分包的配置信息。 6. 在分包的页面,可以使用相对路径引用其他分包的页面或组件。例如,在分包1的`index.vue`页面引用分包2的页面: ```html <template> <view> <other-package-page></other-package-page> </view> </template> <script> import OtherPackagePage from '../../subpackage2/pages/other-package-page.vue' export default { components: { OtherPackagePage } } </script> ``` 以上就是在UniApp进行分包的基本步骤和配置方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值