【uniapp】小程序开发:3 分包配置

分包加载配置,此配置为小程序的分包加载机制。

因小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。

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

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

1、修改manifest.json文件,添加配置

json 复制代码
/* 小程序特有相关 */
"mp-weixin" : {
    "appid" : "xxx",
    /* 启用分包配置 */
    "optimization": {
        "subPackages": true
    },
    "runmode" : "liberate" // 开启分包优化后,必须配置资源释放模式
},

2、在pages.json中配置subPackages

这里是path是相对于root的路径,且分包pages2不能和主包page一致,就是说这里root不能配置成pages

json 复制代码
"subPackages": [{
	"root": "pages2",
	"pages": [
		{
			"path": "login/login",
			"style": {
				"navigationBarTitleText": "登录"
			}
		}]
}],

3、在页面中使用

分包页面一样可以通过uni.navigateTo({ url: '/pages2/login/login' })跳转到对应的页面

注意:

App开启分包后,每个分包单独编译成一个js文件(都包含在app内,不会联网下载),当App首页是vue时,可减小启动加载文件大小,提升启动速度。

首页是nvue时,分包不会提升启动速度,nvue本身启动速度就快于vue,也快于开启分包后的首页为vue的应用。如果追求极致启动速度,还是应该使用nvue做首页并在manifest开启fast模式。

App页面较少时,分包对启动速度的优化不明显。

相关推荐
iOS阿玮2 小时前
排雷,金融类型产品14天封号倒计时脱困。
uni-app·app·apple
Random_index2 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
ywyy67982 小时前
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
人工智能·小程序·短剧·推客系统·推客小程序·推客系统开发·推客小程序开发
华子w9089258595 小时前
基于“SpringBoot+uniapp的考研书库微信小程序设计与实现7000字论文
微信小程序·小程序·uni-app
浩宇软件开发5 小时前
基于微信小程序的校园二手交易平台
微信小程序·小程序·校园二手交易
weixin_177297220696 小时前
淘宝扭蛋机小程序系统开发:打造互动性强的购物平台
小程序
王——小喵6 小时前
启动已有小程序项目
小程序
说私域6 小时前
基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究
人工智能·小程序·开源·零售
柳中仙6 小时前
uniapp+vue3小程序分享
小程序·uni-app
烂笔头儿@7 小时前
uniapp开发小程序vendor.js 过大
小程序·uni-app