项目场景：

React技术栈，后台管理界面，使用异步加载组件。

---

资源结构：

---

问题描述：

代码打包上线后界面崩溃，报loading chunk failed错误，刷新界面后又恢复正常：

---

原因分析：

根本原因：找不到资源。

具体原因：

1.异步加载组件，资源不会一下子全加载，而是你点到哪个界面就加载那个界面的资源。

2.重新打包发布后hash值不一样，找不到旧的资源。

---

解决方案：

方案一：React16+版本新增了个功能：componentDidCatch，用此方法捕获错误，然后主动刷新界面，这样子浏览器获取到的资源就是最新的：

componentDidCatch(error, info) { console.log('Error::::', error); console.log('info', info); if (String(error).includes('Loading chunk')) { window.location.reload(); } }

方案二：前端发布时的资源包里包含上一次的资源，即包含当前版本最新资源和上个版本资源。这样浏览器依然可以找到旧的资源而不会报错。不过这个方案有局限性，不能解决全部问题，但是应该能解决大部分此类问题。