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

已于 2022-10-27 11:13:52 修改
阅读量3.3k 收藏 7
点赞数 5
分类专栏： 前端 文章标签： uni-app 小程序 前端 分包
于 2022-10-26 22:47:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38628046/article/details/127541283
版权

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

小程序分包概述

分包配置参数：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啊！

CodeDevMaster
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
TP-link路由表导致不能路由故障的解决
10-01
路由表，指的是路由器或者其他互联网网络设备上存储的表，该表中存有到达特定网络终端的路径，路由表不直接参与数据包的传输，而是用于生成一个小型指向表，这个指向表仅仅包含由路由算法选择的数据包传输优先路径，这个表格通常为了优化硬件存储和查找而被压缩或提前编
如何跳出小程序五级页面的限制
03-29
前言：做小程序开发，就要在微信的规则内玩耍。最近做的小程序经常会有个报错：RangeError: Maximum call stack size exceeded。这意思是说小程序页面超过5级跳转了，应该怎么解决呢？ (此图片来源于网络，如有侵权，请联系删除! ) 微信小程序官方文档中，关于页面的跳转，有三个API，两个跳转新页面的 API 分别为wx.navigateTo和wx.redirectTo，还有一个 API 名为wx.navigateBack，它用于返回上级页面。 wx.navigateBack在小程序的初始版本中只能回到上一个页面，在最新版本（0.10.102800）的更新中给n
uni-app、小程序项目，在分包后访问地址无法跳转，出现异常：RangeError: Maximum call stack size exceeded
maoge_666的博客
02-23 4389
RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded调试找错
qq_45862085的博客
09-27 3242
过程 最近在用uniapp写一个项目，路由这一方面用的uni-simple-router组件，使用该组件可以用类似vue-router的方式完成路由拦截等操作，但是在初步使用过程中报了RangeError: Maximum call stack size exceeded这样的错误，栈超限了，初步判断可能是路由跳转太多，初始代码如下： router.beforeEach((to, from, next) => { // console.log(1) // console.log(to)
uniapp组件rich-text报错Maximum call stack size exceeded解决方法
weixin_45389051的博客
10-23 1951
因为后台传过来的是Base64类型的，用了v-html和rich-text组件都报错Maximum call stack size exceeded 后来问微信官方，官方说不能加内联样式style，我心想不能加内联样式，你搞个????的富文本，我还准备用正则截取来添加style的 然后就发现了一个插件，特别好用 这是github地址 https://github.com/jin-yufeng/Parser uni如何使用? 只能说这个插件牛逼 顺便再说下如何直接打开word文档吧 uni.download
Maximum call stack size exceeded错误
热门推荐
ttter_的博客
10-07 9万+
日期加减操作、Maximum call stack size exceeded错误
RangeError: Maximum call stack size exceeded
NancyFyn的博客
02-23 5万+
vue 项目运行报错：RangeError: Maximum call stack size exceeded ； 意思是 堆栈溢出（内存溢出） 造成这种情况的原因有多个： 代码形成死循环，造成堆栈溢出 (递归) 如果不确定，可以做个输出，也有可能是调用的方法没有得到更新，导致一直调用同一个数值，也会造成递归 路由也有可能造成内存溢出 可是/404在路由里面没有配置 就引发了报错了！！！ 需要在使用路由的时候注册 3.引用组件名称和当前组件名称一样了 修改组件名称后就正常了 或者
报错问题:Maximum call stack size exceeded
slience_y的博客
04-17 3万+
报错问题:Maximum call stack size exceeded 背景 在页面测试时，点击一个按钮，报出：Maximum call stack size exceeded问题，意思是：超过最大调用堆栈大小。 问题原因 简而言之，就是循环调用，也称作:无限递归，导致堆栈溢出，超出限制大小。经过排查，我锁定了自己的的代码问题： 在d1被触发点击后，又使用了$(’#d1’).trigger(...
Maximum call stack size exceeded（ 超出最大调用堆栈大小）
Jackshijin的博客
03-26 3万+
真系要命咯，一杯茶一包烟一个bug 改一天。在做vue的一个实际的小项目时，出现了以下的Maximum call stack size exceeded（ 超出最大调用堆栈大小），大概意思是递归太深，导致栈溢出 我一看也没写什么递归函数，就一些vue 的路由组件及node 和webpack 的相关配置文件，找了好久，以为是引用了github上的一个开源组件导致的错误，马不停蹄去看文档，改函数...
关于错误消息 RangeError - Maximum call stack size exceeded at XXX
SAP 资深技术专家 Jerry Wang 的技术分享
02-19 8267
此外，如果开发人员不小心两次导入/嵌入相同的 JavaScript 文件，也可能会遇到这种情况。首先，可以使用调试工具（例如浏览器开发工具）查看抛出错误的代码。在旧版浏览器中，当尝试将太多参数传递给浏览器无法处理的函数时，也会出现 RangeError。如果您在多个地方订阅了同一个数据源，则可能会发生递归调用。(3) 使用可观察的错误处理机制（例如 catchError），以在发生错误时终止订阅。(2) 使用 takeUntil 操作符，以在观察的某个时刻终止订阅。下面这段代码可以轻易重现该错误。
JS的函数调用栈stack size的计算方法
12-11
如果你写了一个一直调用自身的死循环，那么恭喜你，很快就可以看到报错：Uncaught RangeError: Maximum call stack size exceeded。那么这个call stack size有多少呢？ 1. 计算方法 如下的方法可以为你计算出你使用...
详解JS函数stack size计算方法
12-01
如果你写了一个一直调用自身的死循环，那么恭喜你，很快就可以看到报错：Uncaught RangeError: Maximum call stack size exceeded。那么这个call stack size有多少呢？ 1. 计算方法 如下的方法可以为你计算出你使用...
node-red-contrib-socketio-server:节点红色贡献socketio服务器
05-03
节点红色贡献socketio服务器 服务器的红色节点。 节点数 socket.io-instance ：创建一个Socket.IO服务器实例。... 否则，将导致“ RangeError：超出最大调用堆栈大小”错误。 参见 。 执照 该项目中的代码已获得。
super-stack:启用错误包装的 Javascript 模块
06-14
入门新产品管理npm install super-stack --save var superStack = require ( 'super-stack' ) ;superStack . attachToErrorPrototype ( ) ;try { someAction ( )} catch ( err ) { throw new RangeError ( 'Object ...
uni-app 使用easycom引入自定义组件，出现Uncaught RangeError: Maximum call stack size exceeded
MKNDG的专栏
04-23 1658
利用uni-app开发微信小程序，借助它的easycom定义一个全局组件。 按照官方说明进行开发，出现了Uncaught RangeError: Maximum call stack size exceeded 这个错误。 目录结构如下： c-header.vue内容如下： <template> <view class="container"> <c-header> <view class="login-
vue-router.esm.js:1697 RangeError: Maximum call stack size exceeded
pobu168的博客
07-20 2万+
vue-router.esm.js:1697 RangeError: Maximum call stack size exceeded
Maximum call stack size exceeded 错误解决
baidu_39040364的博客
06-02 6843
今天在做小程序 setData 的时候报了个这个错误 这个的意思就是你【超出最大调用堆栈大小】 是以为在给属性赋值的时候会改变起始对象(也就是对象自身)也就是浅拷贝，栈内存中假设我们a复制了b，b里面的数据对应的是堆内存数据一。我们进行拷贝后a对应的堆内存还是数据一。当堆内存数据一发生改变那a,b自然都会变的。所以我这里就会导致无限嵌套。自然就抛出了这个问题。 解决办法： 就是我们要使用深拷贝。可以用json转换一遍就可以解决这个问题。jq的extend也是可以 瑞思拜！！！！ ...
【vue2小知识】路由守卫的使用与解决RangeError: Maximum call stack size exceeded问题的报错。
嗨，朋友你好！我是前端领域的工作者
02-28 6662
路由守卫的写法。前置守卫、后置守卫参数与写法详解。解决RangeError: Maximum call stack size exceeded问题的报错。
Maximum call stack size exceeded 如何解决?
weixin_66913730的博客
06-06 8469
Maximum call stack size exceeded 如何解决?
in v-on handler: "RangeError: Maximum call stack size exceeded"
最新发布
09-09
当你在使用Vue.js的v-on指令时，如果在事件处理程序中出现"RangeError: Maximum call stack size exceeded"的错误，通常是由于无限递归调用导致的堆栈溢出错误。 这个错误通常发生在事件处理程序中调用了自身或者是相互调用的函数。当一个事件触发时，事件处理程序被调用，如果事件处理程序中又调用了同一个事件的处理程序，就会出现无限递归调用的情况，导致堆栈溢出。 要解决这个错误，你可以检查你的事件处理程序中是否存在无限递归调用的情况。确保你的事件处理程序不会调用自身或者其他相互调用的函数。 另外，你还可以使用Vue.js提供的一些方法来避免这个错误，比如使用v-once指令来确保事件处理程序只执行一次，或者使用事件修饰符来限制事件的触发次数。 总结一下，当出现"RangeError: Maximum call stack size exceeded"错误时，你需要检查事件处理程序中是否存在无限递归调用的情况，并采取适当的措施来避免这个错误发生。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CodeDevMaster

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值