使用场景

uniapp分包主要是针对打包成微信小程序的时候需要，如若不然可以不用分包。

步骤

1. 创建分包文件夹

我这里有两个分包文件，pagesA和pagesB，根据你们的业务需求来命名分包名称和个数，只要单个分包不超过2M，主包不超过1.5M（官方），总的不超过8M。目录结构如下图：

其中主包占据比较多资源的是static这个目录，里面存放的是静态文件。该文件大小如果太大，建议把里面较大的静态文件放到服务器中，通过网络链接的方式引用，图片不宜太大，否则加载页面时用户体验感不好。

2. 配置文件

2.1 manifest.json文件配置

/**分包优化**/
"optimization":{"subPackages":true}

2.2 pages.json文件配置

//分包配置
"subPackages": [{"root": "pagesA", //分包所在路径"pages": [ //页面数组{"path": "businessManagement/warehouse/warehousing/list", //页面一定在pagesA分包路径下"style": {"navigationBarTitleText": "待入库列表", //页面头部标题"navigationStyle": "custom",  // 隐藏系统导航栏 不隐藏此项不用加"navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一}}]},{"root": "pagesB", "pages": [{"path": "operationMaintenance/declarationForm/list/list","style": {"navigationBarTitleText": "服务报单列表","enablePullDownRefresh": false, //不允许上拉刷新"navigationBarBackgroundColor": "#fff"}}]}
]

3. 检查是否达到标准

3.1 小程序运行

开发工具HBuilder X按图片步骤操作=》运行时压缩

3.2 微信开发者工具检查

ok，试试吧

uniapp前端开发之分包相关推荐

Uni-app前端开发|基于微信小程序的快递运输管理系统
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .CSDN内容合伙人.掘金特邀作者.阿里云博客专家.51CTO特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Jav ...
uni-app前端开发(零)
uni-app学习 uni-app学习手册小科普手机宽度 750rpx 另一种表示方法100VW/VH,相当于100% 动态代码前要加 ' : ' /* scoped使样式只在当前页面中使用 */ ...
uni-app前端开发(二)新闻功能
新闻功能 1.新闻列表首先要在页面的onLoad函数中添加请求初始化分页获取新闻列表 1.1逻辑层 <script>// 此处将方法抽取到了/common/method.js中impor ...
uni-app前端开发(一)登录功能
登录功能 1.登录表单 <view class="bg"><u-image width="150rpx&quo ...
hbuilderx 小程序分包_很酷的HBuilderX和uni-app，开发一次既能生成小程序又能生成App...
很酷的HBuilderX和uni-app,开发一次既能生成小程序又能生成App 创业者福利,做一次小程序和APP都有了更流畅由于基于C++架构而非eclipse或webkit架构,HX在启动速度. ...
uni-app — 一套前端开发跨平台应用的终极解决方案
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 今天有空就来介绍一下uni-app这个能够跨平台开发, ...
跨平台应用开发进阶(三十八)uni-app前端监控方案：基调听云APP探究
文章目录一.前言二.产品介绍 2.1 工作原理 2.1.1 Android平台工作原理 2.1.2 iOS平台工作原理三.项目集成 3.1 Android集成 3.2 iOS集成四.答疑解惑 ...
uniapp+unicloud开发微信小程序流程
微信小程序的简单开发流程,我用一个自制已上线的微信小程序皮皮虎去水印为例,做一个比较详细的开发流程分析. 框架选择选择uniapp: 1.为了开发效率,我选择uniapp框架,使用vue3.2语 ...
【转】2022年web前端开发学习路线图
web前端学习路线图火热出炉啦,还在为如何系统学习web前端开发技术苦苦寻觅资源么? 2022年黑马程序员新版前端学习路线图这不就来了么!小伙计们甩开膀子学起来吧. 只要能坚持学下来走上人生巅峰不再是 ...

uniapp前端开发之分包