首页 > 其他分享 >uniApp分包

uniApp分包

时间:2024-11-14 15:18:10浏览次数:3  
标签:uniApp -- 程序 分包 test 2M pages

  • 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 里面

// 设置分包  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"
  			}
  		}]
  	},
  ],

分包预加载配置


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

跳转分包

<uv-button type="primary" :plain="true" text="跳转分包" @click="goSubPack"></uv-button>
//点击去跳转分包页面
goSubPack() {
  uni.navigateTo({
    url: '/pagesA/pages/test/test'
  })
},

标签:uniApp,--,程序,分包,test,2M,pages
From: https://blog.csdn.net/m1011815213/article/details/143701366

相关文章

  • 解决 uniapp打包app 使用uview的图片上传导致的 您的应用在运行时,未同步告知权限申请
    该问题主要原因是因为u-upload的组件在点击上传组件就直接触发了权限获取而华为的要求是点击拍摄提示获取相机权限并提示点击从相册选择获取存储权限并提示本文主要解决uview的u-upload导致的问题解决思路为修改u-upload组件在u-upload组件添加以下代码//自定义......
  • 百万前端之uniapp开发微信小程序快速上手
    uniapp,一端开发多端使用。在使用uniapp开发之前必须要先掌握vue的语法,因为uniapp是基于vue的语法进行开发的。下载好HBuilderX工具进行开发,事半功倍。开发工具:HBuilderX、微信开发者工具(预览小程序)开发环境:node.js 1.创建项目使用uni-ui多端兼容,开发更高效!2.基础配置......
  • 同城圈子APP隐私设置指南,社交圈子源码,前端uniapp,后端PHP
    圈子系统APP-uniapp源码开源社交圈子小程序社区系统兴趣爱好同城社交社群系统同城圈子APP隐私设置因应用而异,以下为通用步骤:1、进入隐私设置打开APP,点击底部导航栏的“我的”。进入“设置”页面,选择“隐私设置”。2、隐藏位置信息在隐私设置中,找到并点击“隐藏位置”选......
  • vue2的uniapp添加用户登录校验
    在uni-app中实现全局路由守卫的确切方法可能会根据框架的版本和具体的实现方式有所不同。在Vue2和uni-app的结合使用中,全局路由守卫并不是原生支持的功能,因此我们需要采用一些替代方案。对于Vue2和uni-app,你可以通过封装uni-app的页面跳转方法来实现类似全局......
  • uniapp微信小程序video不显示,不生效
    问题描述微信小程序开发者工具video不显示,无法播放,也没有任何错误,就是不显示原因报错原因:微信开发者工具调试基础库版本太高解决方法 ......
  • 微信小程序PHP+uniapp社区后勤报修系统
    目录项目介绍具体实现截图微信开发者工具HBuilderX+uniapp开发技术简介文件解析设计思路性能/安全/负载方面数据访问方式PHP核心代码部分展示代码目录结构解析详细视频演示源码获取项目介绍小程序端运行软件微信开发者工具/hbuiderx基于微信小程序的社区后勤报修系......
  • 微信小程序 nodejs+uniapp+vue个人身体健康系统184bw
    目录课题介绍具体实现截图使用技术介绍解决的思路开发工具和技术简介错误处理和异常处理nodejs类核心代码部分展示源码获取/联系我课题介绍实现了一个完整的身体健康系统,其中主要有运动推荐模块、用户事务模块、用户分享模块、用户模块、饮食推荐模块、消息提醒模块......
  • 2024-11-13 uniapp自定义全局弹窗并可以通过uni来调用【转载】
    新建三个文件: dialog.js:exportdefault{/*链接处理*/getLink(params){leturl="/components/dialog/index";if(params){letparamStr="";for(letnameinparams){param......
  • 基于SpringBoot+Vue+uniapp的大学生志愿者信息管理系统的详细设计和实现(源码+lw+部署
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • uniapp中uni.setTabBarItem方法在非tabbar页面使用会报错
    背景:uniapp在开发小程序多语言切换功能时,使用uni.setTabBarItem方法切换tabbar语言时报错,查阅文档发现微信小程序该功能只能在tabbar页面或其子页面中使用,不能在其他页面直接使用。解决:在tabbar页面中使用onShow方法监听切换语言设置,部分代码示例如下:<scriptsetup>import{......