uniApp分包

  • subPackages 里的pages的路径是 root 下的相对路径,不是全路径。
  • 微信小程序每个分包的大小是2M,总体积一共不能超过20M
  • 百度小程序每个分包的大小是2M,总体积一共不能超过8M。
  • 支付宝小程序每个分包的大小是2M,总体积一共不能超过8M。
  • QQ小程序每个分包的大小是2M,总体积一共不能超过24M。
  • 抖音小程序每个分包的大小是2M,总体积一共不能超过16M(抖音小程序基础库 1.88.0 及以上版本开始支持,抖音小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本)。
  • 快手小程序每个分包的大小是2M,总体积一共不能超过24M。
  • 分包下支持独立的 static 目录,用来对静态资源进行分包。
  • uni-app内支持对微信小程序QQ小程序百度小程序支付宝小程序抖音小程序(HBuilderX 3.0.3+)快手小程序分包优化,即将静态资源或者js文件放入分包内不占用主包大小。详情请参考:关于分包优化的说明
  • 针对vendor.js过大的情况可以使用运行时压缩代码
    • HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
    • cli创建的项目可以在package.json中添加参数--minimize,示例:"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

在 pages.json 里面

javascript 复制代码
// 设置分包  pagesA分包A最大2M 微信
	"subPackages": [
    // 分包A
    {
		"root": "pagesA",
		"pages": [{
			"path": "pages/test/test",
			"style": {
				"navigationBarTitleText": "分包A",
				"enablePullDownRefresh": false,
				"navigationBarBackgroundColor": "#3c9cff"
  			}
  		}]
  	},
    //分包B
    {
		"root": "pagesB",
		"pages": [{
			"path": "pages/test/test",
			"style": {
				"navigationBarTitleText": "分包B",
				"enablePullDownRefresh": false,
				"navigationBarBackgroundColor": "#3c9cff"
  			}
  		}]
  	},
  ],

分包预加载配置

javascript 复制代码
// 分包预加载配置preloadRule后 在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度
	"preloadRule": {
		// 进入首页 自动加载分包 
		"pages/home/home": {
			"network": "all",
			"packages": ["pagesA","pagesB"]//按需要 自己选择加载
		}
	},

跳转分包

javascript 复制代码
<uv-button type="primary" :plain="true" text="跳转分包" @click="goSubPack"></uv-button>
//点击去跳转分包页面
goSubPack() {
  uni.navigateTo({
    url: '/pagesA/pages/test/test'
  })
},
相关推荐
Liu.77416 分钟前
uni-app 组件 uni-easyinput 常见 Bug 及解决方案
uni-app·bug
小徐_233314 小时前
uni-app 项目别再从零搭了!3 个 Wot UI 起手模板怎么选?
前端·uni-app
蜡台15 小时前
uniapp pdf文件预览组件
pdf·uni-app·合同·pdfh5
凡泰AI20 小时前
如何借助MCP打通企业APP内部服务:从统一调用到小程序承接
小程序·uni-app·app·mpaas·mcp·小程序容器
华玥作者21 小时前
uniapp 万条数据不卡顿:我写了个虚拟列表组件 hy-list,原生支持瀑布流
数据结构·uni-app·list·vue3
这是个栗子21 小时前
uni-app 微信小程序开发:常用函数总结(一)
微信小程序·小程序·uni-app·getcurrentpages
宠友信息3 天前
消息序号如何保证即时通讯源码聊天记录稳定加载
java·spring boot·redis·python·mysql·uni-app
2501_916008893 天前
苹果上架工具怎么选 不用 Mac 上架 App Store 的几种方案
android·macos·ios·小程序·uni-app·iphone·webview
宠友信息3 天前
MySQL复合索引与Druid优化仿小红书源码个人主页查询链路
数据库·spring boot·websocket·mysql·uni-app
秃头披风侠_郑4 天前
【uniapp】一文让你学会微信小程序+APP+H5全平台实战指南
前端·微信小程序·uni-app