uniapp小程序 subPackages分包加载配置

使用场景:uniapp开发各种小程序时候遇到主包过大,无法上传的情况
uniapp的分包机制: 参照官网uniapp subPackages使用

小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。此时终端界面会有等待提示。所以分包后的页面是在打开分包内的某个页面以后才会加载分包的内容

每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。

在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示

目前小程序分包大小有以下限制:

  • 整个小程序所有分包大小不超过 20M
  • 单个分包/主包大小不能超过 2M

对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。

分包下支持独立的 static 目录,用来对静态资源进行分包。

1.首先,在uniapp结构里原本已经有一个pages的包(文件夹)了,这时候在pages同级里新建一个subpkg包 并新建页面

2.配置pages.json
在pages.json中新建数组"subPackages",数组中包含两个参数:1.root:为子包的根目录,2.pages:子包由哪些页面组成,参数同pages;

注意:主包和分包是不能再同一目录下,在构建uniapp项目时,可以考虑一下目录结构,以便后期进行分包;
在这里插入图片描述
3.分包预载配置(preloadRule)
做这一步主要为了优化速度,不想优化速度的可以跳过这个配置

配置preloadRule后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度

preloadRule 中,key 是页面路径,value 是进入此页面的预下载配置,每个配置有以下几项:

字段 类型 必填 默认值 说明
packages StringArray 是 无 进入页面后预下载分包的 root 或 name。APP 表示主包。
network String 否 wifi 在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载)
app的分包,同样支持preloadRule,但网络规则无效。

uniapp官方文档配置项

<think>好的,我现在需要回答用户关于如何在UniApp中进行微信小程序分包配置的问题。首先,我需要回忆一下UniApp分包机制。UniApp基于Vue.js,支持多端开发,包括微信小程序微信小程序本身有分包的限制,主包大小不能超过2M,整个项目所有分包不超过20M,所以分包配置是优化小程序加载速度的重要手段。 接下来,用户需要具体的配置教程和示例方法。我记得在UniApp中,分包配置主要是在项目的pages.json文件中进行设置。需要配置subPackages或者subpackages(注意大小写可能不同,但通常UniApp使用subPackages)。每个分包需要指定root、pages和independent等属性。其中,root是分包的根目录,pages里是分包的页面路径,independent表示是否为独立分包。 然后,我需要考虑是否需要示例代码。用户请求了示例,所以应该提供一个具体的配置案例。例如,在pages.json里添加subPackages数组,每个元素是一个分包的对象。同时,要说明如何创建对应的目录结构,比如在项目根目录下新建subpackage目录,里面放分包的页面。 另外,注意事项也很重要,比如主包不能太大,独立分包的使用场景,以及分包预下载的配置分包预下载是在app.json中通过preloadRule设置,但在UniApp中可能需要通过pages.json来配置,或者需要额外的处理。需要确认UniApp如何处理预加载规则,可能需要在manifest.json中进行配置,或者直接在pages.json中添加相关配置。 还要提到一些常见的错误,比如分包的路径配置错误导致页面无法访问,或者主包过大影响加载。同时,引用相关的文档资料,比如微信小程序的官方文档和UniApp的指南,确保信息的准确性。 最后,生成相关问题,可能涉及分包的优势、独立分包与普通分包的区别、性能优化方法等。确保问题覆盖用户可能感兴趣的扩展内容。 现在整理这些思路,按照用户的要求,用中文回答,结构清晰,步骤明确,包含示例代码和注意事项,并在末尾添加相关问题。同时,引用提供的参考资料中的相关内容,特别是引用[1]提到微信小程序分包知识,引用[3]涉及UniApp配置微信开发者工具路径的部分,可以适当关联。</think>以下是UniApp配置微信小程序分包的详细教程和示例方法: ### 一、分包配置步骤 1. **创建分包目录** 在项目根目录下新建`subpackage`文件夹(名称可自定义),内部按主包结构存放页面/组件,例如: ``` ├── subpackage │ ├── pages │ │ └── list │ │ └── list.vue ``` 2. **修改pages.json配置** 在`pages.json`中添加`subPackages`字段: ```json { "pages": [ {"path": "pages/index/index", "style": { /* 主包页面配置 */ }} ], "subPackages": [ { "root": "subpackage", "pages": [ {"path": "pages/list/list", "style": { /* 分包页面配置 */ }} ], "independent": false // 是否独立分包 } ] } ``` 3. **独立分包配置** 将`independent`设为true可实现独立分包(不依赖主包加载): ```json "subPackages": [ { "root": "independent-sub", "pages": [/* ... */], "independent": true } ] ``` ### 二、分包预下载配置 在`pages.json`中设置预加载规则(需基础库2.3.0+): ```json "preloadRule": { "pages/index/index": { "network": "all", "packages": ["subpackage"] } } ``` ### 三、注意事项 1. **主包大小限制**:主包(含`pages`目录和`static`资源)不得超过2MB[^1] 2. **路径规范**:分包路径不能与主包或其他分包重复 3. **资源引用**:分包内建议使用相对路径引用本地资源 4. **跳转方式**:使用`uni.navigateTo`等API时需写完整路径: ```javascript uni.navigateTo({ url: '/subpackage/pages/list/list' }) ``` ### 四、分包优势 - 提升首次加载速度 - 突破主包体积限制 - 实现按需加载 > 引用说明:微信小程序分包机制可有效优化启动性能,UniApp通过统一配置实现多端兼容[^3]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值