uni-app配置分包

原创 已于 2024-04-17 10:24:41 修改 · 957 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #微信小程序

于 2024-04-14 10:26:32 首次发布
本文详细介绍了如何在uni-app中使用pages.json文件配置自定义分包，包括设置分包根目录和子页面路径，以及设置导航栏标题。提供了两个示例来展示配置过程。
  • 文档

uni-app官网•全局文件•pages.json页面路由•subPackagesicon-default.png?t=N7T8https://uniapp.dcloud.net.cn/collocation/pages.html#subpackages

uni-app官网•全局文件•pages.json页面路由•pagesicon-default.png?t=N7T8https://uniapp.dcloud.net.cn/collocation/pages#pages

  • 示例一

1.自定义分包（和pages文件夹同级目录）

2.在pages.json文件，subPackages节点，配置分包

"subPackages": [
	{
		"root": "subPackageA",
		"pages": [
			{
				"path": "list/list",
				"style": {
					"navigationBarTitleText": "列表"
				}
			}
		]
	},
	{
		"root": "subPackageB",
		"pages": [
			{
				"path": "detail/detail",
				"style": {
					"navigationBarTitleText": "详情"
				}
			}
		]
	}
]

示例：

  • 示例二

1.自定义分包

2.在pages.json文件，subPackages节点，配置分包

"subPackages": [
	{
		"root": "subPackage/list",
		"pages": [
			{
				"path": "index",
				"style": {
					"navigationBarTitleText": "列表index"
				}
			},
			{
				"path": "list",
				"style": {
					"navigationBarTitleText": "列表"
				}
			}
		]
	},
	{
		"root": "subPackage/detail",
		"pages": [
			{
				"path": "detail",
				"style": {
					"navigationBarTitleText": "详情"
				}
			},
			{
				"path": "index",
				"style": {
					"navigationBarTitleText": "详情index"
				}
			}
		]
	}
]

示例：

精选资源
基于uni-app+uniui实现，支持H5、APP、微信小程序、支付宝小程序等
04-04
【标题】：“基于uni-app+uniui实现，支持H5、APP、微信小程序、支付宝小程序等” 【描述】：“芋道管理后台的移动端，基于uni-app+uniui实现，支持H5、APP、微信小程序、支付宝小程序等，实现与ruoyi-vue-pro、...
精选资源
uni-app下载插件报错时plugins.7z
08-11
在开发基于Vue.js框架的uni-app项目时，我们经常需要使用到各种插件来扩展功能。然而，在尝试下载和安装这些插件时，有时会遇到一些错误，这可能会影响项目的正常进行。"uni-app下载插件报错时plugins.7z"这个文件名...
uniapp 小程序分包
织网的博客
12-05 2154
小程序打包目前限制大小为2M，建议开发者控制小程序包大小，图片类资源放服务器里，然后src放网络路径来显示。 uniapp分包 subPackages 分包加载配置，此配置为小程序的分包加载机制。 因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。 所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS脚本；而分包则是根据pages.json的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入.
uniapp中使用分包
yuansusu_的博客
04-25 5259
最后我们可以查看当前的主包和分包的体积，在微信开发者小程序的右上角的 详情-基本信息-本地代码-代码依赖中看到关系图，可以看到分包的体积节省了100多k，如果在详情将静态文件细分的情况，可以更少的减少主包的体积。做为小程序的首页，那么他能跳转的二级页面都放在一个分包中来加载（如下图的目录结构），这样不会加载多余的分包，也能提高加载分包的速度。在使用分包的配置后，我们会有主包和分包两个目录，这里主包和分包其实是有联系的，一般我们将主包中的页面，如。在构建小程序分包项目时，构建会输出一个或多个分包。
UniApp分包完整教程
最新发布
2401_85751940的博客
10-11 808
小程序分包是一种代码组织方式，将功能模块划分为不同子包，按需加载。主包包含核心功能，分包存放特定模块。优势包括：提升启动速度（仅加载主包）、优化性能（按需加载）、节省流量、便于团队协作。分包类型有普通分包和独立分包（可独立运行）。配置通过pages.json设置分包路径和预下载规则。开发时需注意：分包大小限制（2MB）、资源引用规范、路由跳转管理。最佳实践包括：按功能模块划分、预下载高频分包、懒加载组件、持续性能监控。合理使用分包能显著提升小程序性能和使用体验。
在 uni-app 中配置小程序分包：优化加载性能的实践指南
m0_57836225的博客
01-29 934
打开项目中的配置文件（注意：实际项目中可能是pages.json等类似配置文件，根据 uni-app 版本和项目配置可能有所不同），在与pages节点同级的位置声明一个节点。该节点是一个数组，数组中的每一个对象代表一个分包。"pages": [// 主包中的页面配置],"root"属性用于指定分包的根目录，这里设置为subpackage，与我们创建的分包根目录名称一致。"pages"属性是一个数组，用于指定当前分包下包含的页面路径。目前数组为空，后续创建页面时会自动添加。
uniapp 为项目配置分包
廖若星辰-LTY
10-09 2021
uniapp 分包 小程序 分包配置 步骤 分包优化
uniapp配置分包
weixin_72503508的博客
03-13 468
uniapp配置小程序分包
精选资源
uni-app+uview+vuex+分包环境搭建
03-07
在进行uni-app+uview+vuex+分包的项目开发前，首先需要安装和配置开发环境。这包括： 1. 安装Node.js：作为JavaScript的运行环境，也是uni-app的依赖。 2. 安装HBuilderX：用于编写和管理uni-app项目，提供代码编辑...
精选资源
《uni-app跨平台开发与应用》期末试卷B卷
10-15
在此过程中，学生需要运用uni-app的基本语法及结构，包括创建分包目录、设置页面内容区域、添加图片和按钮、进行样式设置和路径配置等。分包优化部分不仅考察学生对uni-app框架结构的理解，还考察了学生对于页面布局...
前端 -- uni-app 的 splitChunks 分包详解与实战！
喵手的博客
04-15 1492
前端开发的小伙伴们，是不是经常被“大文件体积”压得喘不过气？尤其是做小程序开发的时候，直接被代码包大小限制卡得怀疑人生。没错，小程序的 2MB 限制真的让人痛彻心扉，难道我们的页面逻辑和功能就不配有点“分量”吗？别急！uni-app给了我们一个神奇的技能——splitChunks 分包。它不仅能让我们的代码“瘦身”，还可以让加载性能飞速提升。这篇文章就带你搞懂 splitChunks 的核心逻辑，并通过实战案例，让你轻松掌握这个利器。在 uni-app 的开发中，就像是一个神奇的分割器。
uniapp分包配置，页面配置
11-29
uniapp分包配置，页面配置，导航配置
UNI-APP 分包使用(详解与实战)
码海扬帆：前端探索之旅的博客
03-02 3349
4、在pages.json中创建"subPackages"数组，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成（参数同pages）；js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用。自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息。
Uniapp小程序 app分包配置
True_story的博客
08-03 809
若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息。
uniapp----分包
一个努力不被优化的程序员
08-11 9214
分包开发一、什么是分包开发？有很多小伙伴一听分包开发认为就是多建几个文件夹，到时候引用就行了，说对对，但也不对，慢慢看下去就知道原因了：首先是官网的介绍：可能说的不是特别清晰，大概意思就是：创建文件，并在min.js中添加路径，并添加下载事件分包对于中、大型项目开发来说是非常有必要的，因为2MB根本做不了什么好看的项目，所以分包开发这个技术一定要会，可以不用但一定要知道怎么解决超出限制问题喜欢的小伙伴可以点个关注后续还会继续发布关于uniapp优化的文章。
uniapp小程序如何分包？完整详细步骤
11-18 5295
以上步骤展示了如何在uniapp项目中进行分包配置，通过合理分包可以提高应用的加载速度和维护效率。希望这个案例对你有所帮助。更多详细信息可以参考uniapp官方文档。在HBuilderX中编译运行小程序，检查是否能看到主包和分包（例如。），在该文件夹下创建你需要分包的页面（例如。字段，指定分包的根目录和包含的页面。文件中，针对微信小程序平台的配置添加。为了进一步提升分包的启动速度，可以在。目录下创建一个新的文件夹（例如。）的字样，以确认分包配置成功。字段，开启分包优化。
uniapp分包
王二的博客
10-30 1670
在 src 目录下创建一个名为 subpackages 的文件夹，用于存放分包的代码。
Uniapp_分包
ZhouXin_0819的博客
06-25 1338
uniapp分包详细操作
uniapp给小程序配置分包
bbt953的博客
05-06 4064
作用：分包可以减少小程序首次启动时的加载时间 工具:HBuilderX 在uniapp项目中，配置分包的步骤如下： 1. 在项目根目录中，创建分包的根目录，命名为subpkg 2. 在pages.json中，和pages节点平级的位置声明subPackages节点，用来定义分包相关的结构： // pages.json { "pages": [], "subPackages:: [ { "root": "subpkg", // 分包的根目录 "pages": [] // 当前分包
uni-app的分包
08-21
Uni-app的分包是指将一个大型应用拆分为多个小包，以实现按需加载和管理模块的目的。每个小包可以独立编译、发布和更新，提高应用的性能和灵活性。 在Uni-app中，可以通过配置manifest.json文件来进行分包的设置。在manifest.json文件中，可以指定哪些页面和组件属于哪个分包，并可以设置分包的路径和名称。 分包的配置示例： ```json { "app": { "pages": [ "pages/index/index", "pages/detail/detail" ], "＊＊＊Packages": [ { "root": "pages/subpackage1/", "pages": [ "page1/page1", "page2/page2" ] }, { "root": "pages/subpackage2/", "pages": [ "page3/page3", "page4/page4" ] } ] } } ``` 上述配置中，pages数组定义了主包中的页面，subPackages数组定义了分包的配置。每个分包都有一个root属性指定分包的路径，以及一个pages数组定义该分包下的页面。 通过这样的配置，Uni-app在构建时会将各个页面打包成不同的分包，实现按需加载和管理。在运行时，Uni-app会根据页面的路径自动加载对应的分包。 需要注意的是，分包功能在Uni-app v2.6.0及以上版本支持。在使用分包功能时，还需要根据不同平台的要求进行适配和配置，以确保分包功能能够正常运行。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值