uniapp和小程序如何分包,详细步骤手把手(图解)
一、小程序分包
每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。
在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示
目前小程序分包大小有以下限制:
- 整个小程序所有分包大小不超过 20M
- 单个分包/主包大小不能超过 2M
对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。
这里直接点击去看官方的分包教程容易理解
二、uniapp分包小程序
App默认为整包。兼容小程序的分包配置。其目的不用于下载提速,而用于首页是vue时的启动提速。
这是我分包小程序之后的目录结构
- components:公共组件(供主包引用)
- page_后跟拼音的都是分包
- 分包里的components是单个分包自己的组件目录,分包vue页面的引用只能是在自己page_zhaoshang分包目录下才可以引用
- pages是主包,里面都是启动页面/TabBar 页面
- static里放的是公共静态资源,图片类
分包步骤:
1.配置manifest.json
"mp-weixin": {
"optimization":{"subPackages":true}
}
优化分包:
在对应平台的配置(manifest.json)下添加"optimization":{"subPackages":true}
开启分包优化
目前只支持mp-weixin
、mp-qq
、mp-baidu
的分包优化
- 静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用
- js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)
- 自定义组件:若某个自定义组件仅被一个分包引用时,且未放入到分包内,编译时会输出提示信息
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官方文档查看配置项
uniapp和小程序如何分包,详细步骤手把手(图解)相关推荐
- 微信小程序开发的详细步骤是什么?
微信小程序开发的详细步骤如下: 1.注册微信小程序开发者账号:需要前往微信公众平台注册一个小程序开发者账号. 2.创建小程序:登录小程序开发者工具,创建一个新的小程序项目,并填写小程序基本信息. 3. ...
- uniapp微信小程序使用vant-weapp详细操作步骤(各种坑)
首先在微信小程序里用的vant是vant-weapp而不是vant 官网: Vant Weapp - 轻量.可靠的小程序 UI 组件库轻量.可靠的小程序 UI 组件库https://youzan.gi ...
- Windows电脑反编译微信小程序含分包详细操作
文章目录 环境准备 1. node 环境准备 2.反编译工具 具体操作 1.微信PC获取小程序 2.解密包 3.反编译 现在网上也有很多关于小程序反编译的教程,随时间的流逝或许随着微信的更新,有出现编 ...
- uniapp 微信小程序开启分包
首先打开配置文件(manifest.json)在小程序相关配置中开启分包模式(optimization配置). /* 小程序特有相关 */"mp-weixin" : {" ...
- 微信小程序开发商城详细步骤
1.创建小程序项目: 使用微信开发者工具,新建一个小程序项目,输入项目名称,选择项目目录,点击"创建"按钮,即可创建小程序项目. 2.添加页面: 在小程序项目中,可以添加多个页面, ...
- uni-app 小程序 配置分包
1.什么是配置分包 配置小程序分包:分包可以减少小程序首次启动时的加载时间 2.怎么操作 我们在项目中,把 tabBar 相关的 4 个页面放到主包中,其它页面(例如:商品详情页.商品列表页)放到分包 ...
- HBuilderX搭建微信小程序;HBuilderX开发uni-app微信小程序;uni-app开发微信小程序;使用uni-app搭建微信小程序;使用uni-ui模板搭建微信小程序步骤
1.选择模板 uni-ui 2.得到创建项目 3.获取APPid 在微信小程序电脑后台获取APPID 这个方法适用于自己申请的微信小程序(自己用的小程序) 打开微信小程序官网:https://mp.w ...
- uniapp - 微信小程序接入腾讯视频播放器功能插件,uniapp开发微信小程序端调用引入并使用腾讯视频播放组件完整全流程(详细示例源码,一键复制开箱即用)
效果图 在uniapp 微信小程序项目中,集成腾讯视频功能插件,实现播放腾讯视频效果,附带详细示例源码及注释, 你可以跟着步骤一步步来,保证几分钟就能快速在uniapp小程序项目中植入腾讯视频功能! ...
- hbuilderx 小程序分包_基于uniapp的微信小程序之分包
0. 缘由 最近工作在接触uni-app,用它来开发微信小程序,也是第一次接触,找了很久,还有大佬用自己写的函数做的,俺觉得我不会也不配,刚好看到下面评论是官方也支持了,所以就用官方的了,这里记录一下 ...
最新文章
- 12306 网站的非技术分析
- 未定义与 double 类型的输入参数相对应的函数 eval_点评一下鸿蒙os的时钟计算函数...
- BZOJ1800 [Ahoi2009]fly 飞行棋 其他
- 南瑞变压器保护装置说明书_电力试验:变压器感应耐压试验(二)
- linux加密框架 crypto 算法管理 - 算法查找接口 crypto_find_alg
- oracle服务器客户端配置文件,服务器 oracle 客户端配置文件
- 手动注册native方法
- 【windows】--- SQL Server 2008 超详细安装教程
- AI人工智能+大数据+ERP=?
- 机器学习之MATLAB代码--基于VMD与SSA优化lssvm的功率预测(多变量)(七)
- Java实现分割矩形
- [ARC093-F][容斥原理][DP]Dark Horse
- CTFshow 2022 菜狗杯部分WEB WP
- 拥塞控制算法(Congestion Control)对比
- 【51单片机】(手把手教你)串口通信-基础篇
- shell脚本编写简易教程
- 点击免费领取视频拍摄和剪辑教程
- c语言如何清除scanf缓存,C语言如何清除scanf()缓存
- 其他——调试时chrom崩溃
- Hyperledger Fabric 入门必读书籍