uniapp写项目如何分包(uniapp项目过大)

uniapp分包的方法在开放文档里有,有一定基础的小伙伴还是可以看懂的
uniapp分包
首先 我们在根目录下创建一个pagesB文件夹,用来放置需要分包的页面
在这里插入图片描述
下一步是把比较大的文件直接拉过去,pages里就没有这个文件了,然后配置路由

"subPackages": [{
		"root": "pagesB",  //文件夹名称,  pages文件夹同级新建一个就行
		"pages": [
			{
			    "path" : "line_otem_detail/line_otem_detail",
			    "style" : {
					"navigationBarTitleText": "确认订单"
				}
			},
		 ]
	}],

它和pages里的路由地址的差距就是没有前缀
两个包的页面分开了,想要联系怎么办?
只需修改路由跳转的路径即可 比如pages里的某个文件要跳转到pagesB里的某个文件,需要精确查找

"../../pagesB/shopping_detail/shopping_detail"

下面是分包预加载
就是说进入那个页面的时候就开始加载某个包文件

"preloadRule": {
		"pages/index/index": {
			"network": "all",
			"packages": ["pagesB"]
		}
	},

all是不限制网络,packages是加载的包名
就这么简单,分包就完成了
进入微信开发者工具,左上角详情,基本信息,本地代码点开就可以看到了
在这里插入图片描述
然后是压缩
针对vendor.js过大的情况可以使用运行时压缩代码
HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码
cli创建的项目可以在pacakge.json中添加参数–minimize,示例:“dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize”

压缩大概可以压一倍左右,所以我建议先压缩运行,再分包

本文转载自: https://blog.csdn.net/weixin_45811884/article/details/108789618

要将已经创建好的uniapp项目进行分包上传,可以按照以下步骤进行操作: 1. 首先,在uniapp项目的根目录下,找到配置文件manifest.json。该文件用于配置项目的一些基本信息和分包设置。 2. 打开manifest.json文件,找到"subPackages"字段,这个字段用于配置分包的信息。如果没有该字段,就手动添加一个空数组"subPackages": []。 3. 在"subPackages"字段中,添加一个对象,用于表示一个独立的分包。对象中应包含以下几个属性: - "root":分包的根目录路径,相对于项目根目录。 - "pages":分包的页面路径,以页面目录(不包括后缀名)为单位,多个页面之间用逗号分隔。 - "name":分包的名字,用于标识区分不同的分包。 4. 按照需求,可以添加多个分包对象,表示多个独立的分包。 5. 经过上述配置后,保存manifest.json文件。 6.项目根目录下,使用命令行工具(如cmd、终端等),运行打包命令"npm run build",对项目进行打包。 7. 打包完成后,在项目根目录的dist目录下,会生成一个名为"subpackages"的文件夹,里面包含了各个分包的文件。 8. 接下来,将生成的分包文件夹(如subpackages文件夹)上传到服务器。 9. 在服务器上配置相关的访问路径,确保分包能够被正确加载。 10. 最后,在uniapp项目的主包中,将分包的页面路径配置到路由表中,这样就可以在主包中跳转和访问分包中的页面。 通过上述步骤,就可以将已创建好的uniapp项目进行分包上传,实现项目的模块化管理和资源的分离。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值