Vue3/Pinia修改状态在Vite生产构建下仅导致Webkit内核浏览器崩溃

问题描述 #

基于Vue3/Vite开发的项目，开发环境执行npm run dev时在Firefox和Chrome中均运行正常，但用默认参数执行npm run build构建的生产版本会导致Chrome崩溃。

问题定位在Pinia store的异步getInfo动作中：遍历数组发起批量XHR请求，尝试将请求结果推入状态变量，核心代码如下：

async getInfo() { 
  Promises.all(someArray.map(i => axios.get(i)))
  .then(res => res.forEach(i => this._myStateVariable.push(i.data)))
}

仅用console.log打印请求结果时无异常，但将结果存入Pinia状态时，仅在Chrome、Safari的生产构建版本中触发崩溃。最初因Firefox运行正常，排除了无限循环的可能性。

已尝试的无效方案 #

• 先收集所有请求结果为完整数组，再一次性赋值给状态：this._myStateVariable = someArrayFromXhrData;
• 使用Pinia官方推荐的$patch方法更新状态：this.$patch({_myStateVariable: someArrayFromXhrData});
• 修改Vite配置，将构建目标切换为es2015

最终解决方案 #

排查后确认是某个修改状态的方法引发了无限循环，将Vue升级到最新版本后，Chrome控制台终于输出了明确的错误提示（Firefox未报错的原因暂未明确），定位到问题根源后解决了崩溃问题。

内容的提问来源于stack exchange，提问作者thomas