uni-app、小程序项目分包经验之谈与天坑异常：RangeError: Maximum call stack size exceeded

news2024/12/24 2:33:07

小程序分包经验之谈与天坑异常：RangeError: Maximum call stack size exceeded

  • 小程序分包概述
    • 分包配置参数：subPackages
    • 分包预载配置参数：preloadRule
    • 如何使用
  • 实际小程序项目分包
    • 项目结构
    • 配置分包
    • 配置分包预载
  • 天坑异常
    • 场景
    • 分析猜想
    • 尝试解决
    • 解决分包页面无法跳转

小程序分包概述

分包配置参数：subPackages

pages.json文件中的subPackages参数是小程序的分包加载配置，主要作用是为了提升页面启动、加载速度。

分包分为主包与分包，主包只能有一个，分包多个，但总的小程序项目体积大小是有一定限制的，不同平台小程序的总体积限制不一样。

主包

放置默认启动页面/TabBar页面，以及一些所有分包都需用到公共资源/JS脚本

分包

通常根据不同功能模块进行划分

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

subPackages参数接收一个数组，数组每一项都是应用的子包，相关属性值如下：

属性类型是否必填描述
rootString是子包的根目录
pagesArray是子包由哪些页面组成，参数同 pages

分包预载配置参数：preloadRule

配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度

preloadRule参数接收一个对象，key是页面路径，value是进入此页面的预下载配置，配置如下：

字段类型必填默认值说明
packagesStringArray是无进入页面后预下载分包的 root 或 name。APP 表示主包。
networkString否wifi在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）

如何使用

假设支持分包的uni-app、小程序目录结构如下：

┌─pages
│  ├─index
│  │  └─index.vue
│  └─login
│     └─login.vue
├─pagesA
│  ├─static
│  └─list
│     └─list.vue
├─pagesB
│  ├─static
│  └─detail
│     └─detail.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

则在pages.json中需要如下这样配置

{
	"pages": [{
		"path": "pages/index/index",
		"style": { ...}
	}, {
		"path": "pages/login/login",
		"style": { ...}
	}],
	"subPackages": [{
		"root": "pagesA",
		"pages": [{
			"path": "list/list",
			"style": { ...}
		}]
	}, {
		"root": "pagesB",
		"pages": [{
			"path": "detail/detail",
			"style": { ...}
		}]
	}],
	"preloadRule": {
		"pagesA/list/list": {
			"network": "all",
			"packages": ["__APP__"]
		},
		"pagesB/detail/detail": {
			"network": "all",
			"packages": ["pagesA"]
		}
	}
}

实际小程序项目分包

实际小程序项目分包，参考相关文档，按文档说明进行配置即可，在初次听说分包时还是一脸懵逼，看了文档，配置后发现分包也就那样。

项目结构

本项目是以cli方式开发，与使用HBuilderX生成的目录结构有一定差异，但万变不离其宗，配置大同小异。

本项目结构如下，由于小程序包体积过大，需要进行分包操作，这里将对process目录，即本项目的一个功能模块进行分包处理。

在这里插入图片描述

配置分包

对pages.json文件进行配置，参考相关文档，按文档说明进行配置即可，相对简单

   "pages": [
		{
			"path": "pages/index/login",
			"style": {
				"navigationBarTitleText": "登录"
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		}
	],
	"subPackages": [
		{
			"root": "pages/process",
			"pages": [
				{
					"path": "core/ProcessList",
					"name": "ProcessList",
					"style": {
						"navigationBarTitleText": "流程列表"
					}
				}
			]
		}
	]

配置分包预载

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

当启动项目，访问pages/index/index地址时，就会加载分包资源，且能在控制台看到如下内容提示

preloadSubpackages: pages/process
preloadSubpackages: success

天坑异常

场景

在主包某个页面，有一个跳转页面的点击事件，事件如下

methods:{
    click(name) {
      //this.$Router.push("/pages/process/core/ProcessList")
      
      uni.navigateTo({
			url: '/pages/process/core/ProcessList'
		});
    }
  }

进行项目分包后，在主包某个页面访问分包的某个页面，发现无法访问，直接报错，且还不能直观发现问题，具体异常如下：

RangeError: Maximum call stack size exceeded
    at RegExp.get global [as global] (<anonymous>)
    at RegExp.[Symbol.replace] (<anonymous>)
    at String.replace (<anonymous>)
    at l (vendor.js?t=wechat&s=1666771492607&v=0305a7a0cd1f60c216184c725a22d2c3:19494)
    at f (vendor.js?t=wechat&s=1666771492607&v=0305a7a0cd1f60c216184c725a22d2c3:19494)
    at vendor.js?t=wechat&s=1666771492607&v=0305a7a0cd1f60c216184c725a22d2c3:19494
    at e (vendor.js?t=wechat&s=1666771492607&v=0305a7a0cd1f60c216184c725a22d2c3:19494)
    at e (vendor.js?t=wechat&s=1666771492607&v=0305a7a0cd1f60c216184c725a22d2c3:19494)
    at Object.e [as routesForMapRoute] (vendor.js?t=wechat&s=1666771492607&v=0305a7a0cd1f60c216184c725a22d2c3:19494)
    at Object.f [as navjump] (vendor.js?t=wechat&s=1666771492607&v=0305a7a0cd1f60c216184c725a22d2c3:19494)(env: Windows,mp,1.06.2209190; lib: 2.25.4)

分析猜想

就一个点击事件怎么会造成呢，在分包前是能正常访问的，分包后无法访问，百思不得其解，查阅了国内外各种相关资料，没发现类似问题。，均无解，折腾、苦恼一天，直到快下班的时候，脑壳突然灵光一闪。

异常提示：Maximum call stack size exceeded，大概意思是：超过最大调用堆栈大小

猜想：出现此问题，应该是那个地方出现了死循环，而跳转跟路由相关，然后查看路由跳转相关配置，配置如下：

import {RouterMount,createRouter} from 'uni-simple-router';

//初始化
const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM,
    routes: [...ROUTES,
			{path: '*', redirect:(to)=>{return {name:'404'}}},
			]
});

const whiteList = ['/pages/index/login']

//全局路由前置守卫
router.beforeEach((to, from, next) => {
	let token=uni.getStorageSync("Token");
	if(token){
		next()
	}else{
		if (whiteList.indexOf(to.path) !== -1) {
			next()
		}else{
			next({ path: '/pages/index/login'})
		}
	}
});

// 全局路由后置守卫
router.afterEach((to, from) => {
    console.log('跳转结束')
})

export {
    router,
    RouterMount
}

尝试解决

将{path: '*', redirect:(to)=>{return {name:'404'}}},路由找不到重定向到404页面注释，然后再次点击跳转页面，发现控制台出现了明显的提示

Error: /pages/process/core/ProcessList 路径无法在路由表中找到！检查跳转路径及路由表
    at Object.e [as routesForMapRoute] (vendor.js?t=wechat&s=1666830636547&v=05274921cc6e9566623954d1e3403ca3:19487)
    at Object.t.queryPageToMap (vendor.js?t=wechat&s=1666830636547&v=05274921cc6e9566623954d1e3403ca3:19487)
    at f (vendor.js?t=wechat&s=1666830636547&v=05274921cc6e9566623954d1e3403ca3:19487)
    at vendor.js?t=wechat&s=1666830636547&v=05274921cc6e9566623954d1e3403ca3:19487
    at Object.t.lockDetectWarn (vendor.js?t=wechat&s=1666830636547&v=05274921cc6e9566623954d1e3403ca3:19487)
    at Object.s [as lockNavjump] (vendor.js?t=wechat&s=1666830636547&v=05274921cc6e9566623954d1e3403ca3:19487)
    at Object.push (vendor.js?t=wechat&s=1666830636547&v=05274921cc6e9566623954d1e3403ca3:19487)
    at VueComponent.click (IndexGrid.js:213)
    at vendor.js?t=wechat&s=1666830636547&v=05274921cc6e9566623954d1e3403ca3:2081
    at Array.forEach (<anonymous>)(env: Windows,mp,1.06.2210141; lib: 2.25.4)

这个路径肯定是存在的，并且使用分包预加载是加载了的，奇了怪了，既然找不到这个路由地址，那在没注释上述代码时，应该跳转到404页面，居然没跳转，仔细看代码，发现本项目这里使用命名路由，这个name:'404'配置被遗漏了。

原来pages.json文件：

pages": [
		{
			"path": "pages/error/404",
			"style": {
				"navigationBarTitleText": "404"
			}
		}
		
	]

修改后对应pages.json文件：

pages": [
		{
			"path": "pages/error/404",
                        "name": "404",
			"style": {
				"navigationBarTitleText": "404"
			}
		}
		
	]

如此，得出猜测结论：点击事件跳转某个页面，当找不到跳转页面则重定向到name:'404'的页面，由于今天对pages.json文件进行拆分，使用动态生成pages.json文件，进行了相关页面配置拆分到不同js文件，恰好error.js中配置的404页面中没有配置name:'404'参数，被遗漏了，故此这里进行了死循环造成了堆栈溢出。

重启项目，动态生成pages.json文件，再次点击访问跳转分包页面，发现重定向到了404页面，到这里这个异常：RangeError: Maximum call stack size exceeded就得以解决。

解决分包页面无法跳转

在上面分析猜想得出结果：在router.js文件中将路由找不到重定向到404页面注释，然后再次点击跳转页面，发现控制台出现了明显的提示，找不到相关页面地址、路由地址。

Error: /pages/process/core/ProcessList 路径无法在路由表中找到！检查跳转路径及路由表

这个路由地址能肯定是存在、正确的，并且使用分包预加载是加载了的，很奇怪，然后又看了一遍官方文档，突然发现在分包配置参数root的值与本项目配置的有点点差异：

官方示例：

"preloadRule": {
		"pagesA/list/list": {
			"network": "all",
			"packages": ["__APP__"]
		},
		"pagesB/detail/detail": {
			"network": "all",
			"packages": ["pagesA"]
		}
	}

本项目配置：

	"subPackages": [
		{
			"root": "pages/process/",
			"pages": [
				{
					"path": "core/ProcessList",
					"name": "ProcessList",
					"style": {
						"navigationBarTitleText": "流程列表"
					}
				}
			]
		}
	]

root参数用于配置子包的根目录，官方配置根目录后面没有/，期初我也觉得这个不是重点，实在无解，打算尝试的心理一试，结果可以了，问题得以解决，一句MMP啊！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1132.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

springboot配置多个数据源

springboot配置多个数据源

一.多数据源的典型使用场景 在实际开发中,经常可能遇到在一个应用中可能要访问多个数据库多的情况,以下是两种典型场景 1.业务复杂 数据分布在不同的数据库中,数据库拆了,应用没拆.一个公司多个子项目,各用各的数据库,设计数据共享 2.读写分离 为了解决数据库的性能瓶颈(读…
阅读更多...
C++内存管理和模板

C++内存管理和模板

目录 内存管理 new T[N] new和delete关键字的总结&#xff1a; 定位new表达式(placement-new)&#xff1a; 作用&#xff1a; 使用格式&#xff1a; 使用场景&#xff1a; 实例&#xff1a; 调用析构函数的两个方法&#xff1a; 池化技术&#xff1a; 面试题&#xff1…
阅读更多...
Unity 分享 功能 用Unity Native Share Plugin 实现链接、图片、视频等文件的分享+ 安卓 Ios 都可以，代码图文详解

Unity 分享 功能 用Unity Native Share Plugin 实现链接、图片、视频等文件的分享+ 安卓 Ios 都可以，代码图文详解

Unity 分享 功能 用Unity Native Share Plugin 实现链接、图片、视频等文件的分享 安卓 Ios 都可以&#xff0c;代码图文详解前言环境效果一、Unity Native Share Plugin导入1.下载2.导入二、案例1.分享文字1.脚本2.发包注意2.分享视频1.完善下刚才的脚本2.给复制按钮添加点击事…
阅读更多...
【Linux】Linux环境搭建

【Linux】Linux环境搭建

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《学会Linux》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;Linux的介…
阅读更多...
【QT 自研上位机 与 STM32F103下位机联调＞＞＞通信测试-基础样例-联合文章】

【QT 自研上位机 与 STM32F103下位机联调＞＞＞通信测试-基础样例-联合文章】

【QT 自研上位机 与 STM32F103下位机联调>>>通信测试-基础样例-联合文章】1、概述2、实验环境3、联合文章&#xff08;1&#xff09;对于上位机&#xff0c;可以参照如下例子&#xff08;2&#xff09;对于下位机&#xff0c;可以参照如下例子4、QT上位机部分第一步&a…
阅读更多...
python中os库的使用

python中os库的使用

目录介绍1 listdir(path: str)2 path.isdir(path: str)3 path.isfile(path: str)4 path.join(path: str, file: str)5 path.getsize(path: str)介绍 本博客记录python中os库的一些函数使用。 1 listdir(path: str) listdir()函数输入一个目录&#xff0c;返回该目录下的所有…
阅读更多...
web前端 html+css+javascript游戏网页设计实例 (网页制作课作业)

web前端 html+css+javascript游戏网页设计实例 (网页制作课作业)

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…
阅读更多...
数字化浪潮下，低代码能否加速企业的数字化转型

数字化浪潮下，低代码能否加速企业的数字化转型

随着加快建设数字中国的目标明确下来&#xff0c;市场上与数字化相关的企业都得到了极大鼓舞&#xff0c;这不仅意味着后续数字领域的加速发展&#xff0c;更是代表着数字化已经完全可以向各行各业拓展&#xff0c;大力推进数字化建设。数字中国也说明了数字化并不能只是限制在…
阅读更多...
FastTunnel Win10内网穿透实现远程桌面

FastTunnel Win10内网穿透实现远程桌面

目录 一、需求 二、购买公网服务器 三、远程公网服务器 四、FastTunnel 的使用 1.下载 FastTunnel 2.启动服务器端 3.启动客户端 五、测试 六、安装服务 结束 一、需求 FastTunnel 简介 高性能跨平台内网穿透工具&#xff0c;使用它可以实现将内网服务暴露到公网供…
阅读更多...
【数据结构与算法】时间复杂度和空间复杂度

【数据结构与算法】时间复杂度和空间复杂度

✨ 个人主页&#xff1a;bit me ✨ 当前专栏&#xff1a;数据结构 &#x1f31f;每日一语&#xff1a;窗外有风景 笔下有前途 低头是题海 抬头是鹏程 时间复杂度和空间复杂度的认知&#x1f30e; 一. 如何衡量一个算法的好坏&#x1f319; 二. 算法效率&#x1fa90; 三. 时间…
阅读更多...
Word处理控件Aspose.Words功能演示：在 Python 中将 TXT 文件转换为 PDF

Word处理控件Aspose.Words功能演示：在 Python 中将 TXT 文件转换为 PDF

各种人使用记事本以TXT格式记下重点或快速创建笔记。此外&#xff0c;TXT 文件用于在各种应用程序中存储纯文本。但是&#xff0c;由于记事本不提供高级功能&#xff0c;因此 TXT 文件通常会转换为PDF。为了以编程方式自动将 TXT 转换为 PDF&#xff0c;本文介绍了如何在 Pytho…
阅读更多...
WEB API 接口签名sign验证入门与实战

WEB API 接口签名sign验证入门与实战

目录参考什么是加解密加密方式分类对称加密技术非对称加密技术&#xff08;RSA加密算法&#xff09;&#xff08;数字证书&#xff09;场景1&#xff1a;公钥加密&#xff0c;私钥解密场景2&#xff1a;秘钥加密&#xff1a;数字签名&#xff0c;公钥解密&#xff1a;验证签名M…
阅读更多...
从位运算理解位图

从位运算理解位图

位图是一种较难理解的数据结构&#xff0c;想了解位图&#xff0c;我需要先温习一下基础&#xff0c;复习下一些二进制的知识 位运算 1个字节8个二进制位 二进制每逢二进一&#xff0c;下面是二进制对应的十进制转换方式 二进制十进制0000 00012^010000 00102^120000 00112…
阅读更多...
用户故事地图怎么用？实践才能出真知

用户故事地图怎么用？实践才能出真知

在产品设计和交互过程中&#xff0c;用户体验是一个非常重要的部分。 随着产品的逐渐完善&#xff0c;主创团队也需要通过各个维度来了解用户需求&#xff0c;完善用户的整体体验。在这里&#xff0c;我们经常用到的一个实践是用户故事地图。 一、用户故事地图是什么&#xff…
阅读更多...
【Linux】指令及权限管理的学习总结

【Linux】指令及权限管理的学习总结

文章目录1️⃣ Linux的文件系统结构简介2️⃣ Linux下的基本指令1. ls2. pwd3. cd4. touch5. mkdir6. rm7. rmdir8. cp9. mv10. cat11. more12. less13. head14. tail15. find16. grep17. zip18. unzip19. tar20. uname3️⃣ Linux下的权限权限管理1. 文件的访问者分类&#xf…
阅读更多...
【C++】多态

【C++】多态

1.多态 1.1多态的概念&#xff1a; 多态&#xff1a;就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会产生出不同的状态。李明要吃饭&#xff0c;那就要吃早饭&#xff0c;午饭&#xff0c;晚饭&#xff0c;而不是一天只吃午饭这种单一…
阅读更多...
Java多线程（4）：ThreadLocal

Java多线程（4）：ThreadLocal

您好&#xff0c;我是湘王&#xff0c;这是我的CSDN博客&#xff0c;欢迎您来&#xff0c;欢迎您再来&#xff5e; 为了提高CPU的利用率&#xff0c;工程师们创造了多线程。但是线程们说&#xff1a;要有光&#xff01;&#xff08;为了减少线程创建&#xff08;T1启动&#xf…
阅读更多...
Synchronized底层核心原理

Synchronized底层核心原理

前言&#xff1a;大家好&#xff0c;我是小威&#xff0c;24届毕业生&#xff0c;在一家满意的公司实习。本篇文章是关于并发编程中Synchronized锁的底层核心原理知识记录&#xff0c;由于篇幅原因&#xff0c;下篇文章将介绍各种锁的优化原理。 本篇文章记录的基础知识&#x…
阅读更多...
vue3 异步组件

vue3 异步组件

前端开发经常遇到异步的问题&#xff0c;请求函数&#xff0c;链接库&#xff0c;等&#xff0c;都有可能需要通过promise或者async await 来进行异步的一个封装。 异步组件也由此诞生&#xff0c;我用settimeout来模拟一个vue3的异步组件 异步的子组件 <template><…
阅读更多...
spring框架源码十三、spring ioc高级特性-后置处理器

spring框架源码十三、spring ioc高级特性-后置处理器

spring ioc高级特性-后置处理器BeanPostProcessor实例MyBeanPostProcessorapplication-context.xmlTestServiceImpl测试BeanFactoryPostProcessorspring提供了两种后置处理bean的扩展接口&#xff0c; 分别为BeanPostProcessor和BeanFactoryPostProcessor&#xff0c; BeanPos…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023