微信小程序---》分包加载

小程序分包加载机制
本文详细解析了小程序分包加载的原理与实现方式,包括如何通过app.json的subpackages字段配置分包,以及分包加载如何优化小程序启动速度和资源管理。

【小程序】---分包加载

 

一、分包加载

  某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载

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

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

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

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

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

 

二、分包加载的实现

  1、目录结构

  2、app.json subpackages 字段声明项目分包结构

复制代码
"subpackages": [
  {
    "root": "pages/api/",
    "pages": [
     "component/cat/index"
    ]
  }
]
复制代码

 

转载于:https://www.cnblogs.com/wangqi2019/p/10779177.html

### uni-app 加载微信小程序分包的方法 在 uni-app 中加载微信小程序分包时,需要遵循特定的配置规则来优化小程序的代码体积并提升性能。uni-app 支持通过 `pages.json` 文件配置分包规则,然后在构建过程中将其转换为微信小程序的 `app.json` 配置。具体实现如下: #### 配置分包路径 在 `pages.json` 文件中,可以通过 `subPackages` 字段定义分包路径,并将需要分包的页面放置在指定的子包目录中。例如: ```json { "pages": [ { "path": "pages/home/yydhome", "style": { "navigationBarTitleText": "房东", "navigationStyle": "custom" } }, { "path": "pages/userlogin/login", "style": { "navigationBarTitleText": "登录", "navigationStyle": "custom" } } ], "subPackages": [ { "root": "mypages", "pages": [ { "path": "pages/waterElectricPrice/waterElectricPrice", "style": { "navigationBarTitleText": "水电价", "navigationStyle": "custom" } }, { "path": "pages/roomdetail/roomdetail", "style": { "navigationBarTitleText": "房间详情", "navigationStyle": "custom" } } ] } ] } ``` 在 uni-app 中配置分包后,构建工具会将分包页面的内容放置到对应的子包目录中,并生成符合微信小程序要求的 `app.json` 文件。 #### 页面跳转处理 分包完成后,页面跳转时需要使用完整的路径,包括分包的目录前缀。例如,从主包页面跳转到分包页面时,应使用 `/mypages/pages/roomdetail/roomdetail` 作为目标路径: ```javascript uni.navigateTo({ url: '/mypages/pages/roomdetail/roomdetail' }); ``` 这种跳转方式确保了微信小程序能够正确加载分包中的页面内容。 #### 分包限制与优化 微信小程序对代码包体积有严格限制,每个子包的大小不得超过 2MB。因此,在开发过程中需要合理规划分包内容,避免单个分包过大。此外,对于小型项目,建议通过减少资源文件大小(如将图片放在网络路径)来降低代码包体积,而不是强制分包。 #### 公共组件处理 在分包开发中,如果多个分包需要使用相同的组件,可以将这些组件放置在主包中以避免重复引入。另外,主包中不能直接引入分包的组件,否则可能导致构建错误。如果需要动态加载分包中的组件,可以在 `app.json` 中移除 `lazyCodeLoading: 'requiredComponents'` 配置,或者将分包组件统一移动到主包中。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值