uniapp和小程序如何分包,详细步骤手把手(图解)

本文详细介绍了uniapp和小程序的分包步骤,包括配置manifest.json、pages.json以及分包预载配置,旨在优化启动速度和解耦协作。小程序分包限制主包不超过2M,总大小不超过20M。uniapp分包用于首页启动提速,分包目录结构包括主包、分包及其各自组件。分包配置涉及静态资源、js文件和自定义组件的归属。
摘要由CSDN通过智能技术生成

一、小程序分包

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

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

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

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

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

这里直接点击去看官方的分包教程容易理解

二、uniapp分包小程序

App默认为整包。兼容小程序的分包配置。其目的不用于下载提速,而用于首页是vue时的启动提速。

这是我分包小程序之后的目录结构

  • components:公共组件(供主包引用)
  • page_后跟拼音的都是分包
  • 分包里的components是单个分包自己的组件目录,分包vue页面的引用只能是在自己page_zhaoshang分包目录下才可以引用
  • pages是主包,里面都
分包在uni-app中的具体步骤如下: 1. 在pages.json文件中配置分包规则。在"subPackages"字段中添加一个对象,其中包含"root"和"pages"两个字段。"root"表示子包的根目录,"pages"表示子包中的页面配置。每个页面配置包括"path"和"style"两个字段,分别表示页面路径和页面样式配置。 2. 如果想进一步提升分包的启动速度,可以进行分包预加载处理。在pages.json文件中的"preloadRule"字段中配置预加载规则。可以指定在进入某个页面后预下载某个分包。预加载规则包括"network"和"packages"两个字段,分别表示预下载的网络条件和预下载的分包路径。 3. 在manifest.json文件中配置分包设置。需要设置在app端开启分包。具体配置可以参考uni-app官网的文档。 总结起来,uni-app分包的具体步骤包括配置pages.json文件中的分包规则,配置分包预加载规则,以及在manifest.json文件中开启分包设置。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [uniapp分包小程序分包处理,详解(图解),手把手从0开始](https://blog.csdn.net/weixin_50587417/article/details/126933562)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [uniapp小程序如何分包详细步骤手把手图解)](https://blog.csdn.net/Bejpse/article/details/123367670)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值