一、为什么要分包

因小程序有体积和资源加载限制，优化小程序的下载和启动速度。

二、主包和分包

所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。

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

App默认为整包。从uni-app 2.7.12+ 开始，也兼容了小程序的分包配置。其目的不用于下载提速，而用于首页是vue时的启动提速。App下开启分包，除在pages.json中配置分包规则外，还需要在manifest中设置在app端开启分包设置，详见：uni-app官网

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

微信小程序每个分包的大小是2M，总体积一共不能超过20M。
百度小程序每个分包的大小是2M，总体积一共不能超过8M。
支付宝小程序每个分包的大小是2M，总体积一共不能超过8M。
QQ小程序每个分包的大小是2M，总体积一共不能超过24M。
字节小程序每个分包的大小是2M，总体积一共不能超过16M（字节小程序基础库 1.88.0 及以上版本开始支持，字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本）

三、原始配置

首先我们来看一下正常的配置和目录，当前添加了tabBar表现，这里我们只添加了四个

当前还没有配置分包的pages.json文件

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index",  //配置页面路径"style": {"navigationBarTitleText": "首页", //导航栏标题文字内容"enablePullDownRefresh": false //是否开启下拉刷新: 默认为false}}, {"path": "pages/car/car","style": {"navigationBarTitleText": "订单","enablePullDownRefresh": false}}, {"path": "pages/mine/mine","style": {"navigationBarTitleText": "我的","enablePullDownRefresh": false}}, {"path": "pages/order/order","style": {"navigationBarTitleText": "购物车","enablePullDownRefresh": false}}],"tabBar":{ //设置底部 tab 的表现"color": "#909399",       //tab 上的文字默认颜色"selectedColor": "#303133",       //tab 上的文字选中时的颜色"backgroundColor": "#e5e5e5",   //tab 的背景色"borderStyle":"white",        //tabbar 上边框的颜色，可选值 black/white，也支持其他颜色值"list": [   //tab 的列表，详见 list 属性说明，最少2个、最多5个 tab{"pagePath": "pages/index/index", //页面路径，必须在 pages 中先定义"iconPath": "static/tabBar/home.png",   //图片路径"selectedIconPath": "static/tabBar/home-active.png",  //选中时的图片路径"text": "首页"      //tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标},{"pagePath": "pages/car/car","iconPath": "static/tabBar/circle.png","selectedIconPath": "static/tabBar/circle-active.png","text": "订单"},{"pagePath": "pages/order/order","iconPath": "static/tabBar/order.png","selectedIconPath": "static/tabBar/order-active.png","text": "购物车"},{"pagePath": "pages/mine/mine","iconPath": "static/tabBar/mine.png","selectedIconPath": "static/tabBar/mine-active.png","text": "我的"}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "小小商城","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}

四、分包配置步骤

1.在page文件夹下创建一个subPack(不限制文件夹名称)文件夹，在subPack文件夹下创建tab文件和list文件

2.pages.json文件配置以下配置

{//分包加载配置，此配置为小程序的分包加载机制。"subPackages": [{"root": "pages/subPack", //子包的根目录"pages": [{ //这里的配置路径和pages里的一样"path": "list", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好"style": {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path": "tab","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}]}]
}

这样我们分包就配置好了但是如果我们想进一步提升分包的启动速度的话需要做分包预加载处理

{// 分包预载配置"preloadRule": {// 当我们进入了pages/index/index页面以后就会预下载pages/subPack分包"pages/index/index": {"network": "all",  //在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）"packages": ["pages/subPack"]   //进入页面后预下载分包}}
}

这样我们分包就配置好了

uniapp分包，小程序分包处理，详解(图解)，手把手从0开始相关推荐

php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
小程序向Java传值,微信小程序页面传值详解
微信小程序页面传值详解一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如这里将good_id=16 参数传入detail页面, 然后detail页面的 ...
微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
微信小程序底部菜单详解
微信小程序底部菜单详解只需要在app.json里面修改配置,即可 {"pages":["pages/index/index","pages/logs ...
微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...
php 微信小程序循环多选,微信小程序 for 循环详解
1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wx ...
【愚公系列】2022年08月微信小程序-icon图标详解
文章目录前言一.自带图标二.实现图标的五种方案 1.图片 2.精灵图 3.CSS绘图 4.矢量字体 4.1 使用步骤 5.SVG格式前言在小程序中经常会用到各种各样的图标,如果这些图标都使用 ...
钉钉小程序使用vant_高效钉钉小程序开发丨详解Hello，dingtalk
前一节我们对钉钉小程序开发有了一定的了解,我们可以修改标题以及页面内容.本节我们将来对整个目录结构做详细说明. 钉钉小程序分为两层:app层(小程序的全局配置)和page层(页面详细配置). app层 ...
【答题】在线答卷-答题系统的微信小程序开发流程详解
用死记硬背的方法学习的学生,面对桌上堆积成厚厚的书本,是否感觉鸭梨山大呢,想着教育却面临着学习成本不小问题,是否感觉各种不便呢,如果对编程代码有感兴趣,不妨试试做一个自己的在线答题系统,这里可以用微信 ...
高效钉钉小程序开发丨详解Hello，dingtalk
前一节我们对钉钉小程序开发有了一定的了解,我们可以修改标题以及页面内容.本节我们将来对整个目录结构做详细说明. 钉钉小程序分为两层:app层(小程序的全局配置)和page层(页面详细配置). app层 ...

uniapp分包，小程序分包处理，详解(图解)，手把手从0开始