ResizeObserver loop completed with undelivered notifications. at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:308:58) at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:327:7)
时间: 2025-03-08 18:08:16 浏览: 59
### 解决 ResizeObserver 循环完成时带有未交付的通知的错误
当遇到 `ResizeObserver loop completed with undelivered notifications` 的警告或错误时,这通常意味着在观察器循环结束之前有未能处理的通知。此问题可能由多种因素引起。
#### 修改 ResizeObserver 实现
一种常见的解决方案是在项目入口文件(如 main.ts 或 App.vue)中修改默认的 `ResizeObserver` 行为来减少通知频率。通过引入 lodash 库中的防抖函数可以实现这一点:
```typescript
import { debounce } from 'lodash';
const originalRO = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends originalRO {
constructor(callback: (...args: any[]) => void) {
super(debounce(callback, 100));
}
};
```
上述代码片段展示了如何利用 Lodash 提供的 `debounce()` 函数延迟回调执行时间至最接近的一百毫秒边界处[^3]。
#### 调整 Webpack Dev Server 配置
如果该问题是由于开发服务器配置不当引起的,则可以通过调整 webpack dev server 设置尝试解决问题。确保 webapck.config.js 中关于 hot reload 和 live reloading 的选项设置合理,并考虑禁用某些特性测试效果。
对于特定 UI 组件库引发的问题,比如 element-plus 或 ant-design-vue,在这些框架下工作的开发者报告说他们遇到了类似的 resize observer 错误消息。针对这种情况,除了上面提到的方法外还可以探索对应组件文档寻找官方建议或者社区贡献的最佳实践方案[^4]。
#### 处理潜在性能瓶颈
有时这个警告也可能暗示着应用程序存在性能方面的问题——即页面中有太多 DOM 元素正在被监控尺寸变化。优化布局逻辑、移除不必要的监听以及提高应用整体效率也是值得探讨的方向之一。
阅读全文
相关推荐


















