本文转载自微信公众号“DYBOY”，作者DYBOY。转载本文请联系DYBOY公众号。随着项目越来越强大，优化首屏加载和渲染速度迫在眉睫。其中，使用了React框架提供的Reat.lazy()按需加载方式。大量的网络请求错误日志，大部分来自分包资源下载失败！难道我的优化变成了负优化？根据我们统计平台的量化数据来看，用户网络加载失败的概率还是比较高的。实验发现没有办法使用try{}catch{}捕捉组件渲染错误，查看官方文档，有个ErrorBoundaries组件映入眼帘，提供了解决方案。然后我们得到如何改进demo并应用到我们的项目中，以及如何解决按需组件加载失败的场景。背景某天在开发一个功能组件的时候，发现这个组件引用了一个非常大的三方库，大约100kb，这么大，当然得用按需加载了。当我理所当然地认为这个手“按需加载”优化非常稳定，所以我将它交给测试学生进行测试。没过多久就测试了同学们的反馈。为什么你的函数总是空白？——怎么可能？我的代码不能有BUG！来到“事故现场”，稍作思索，打开浏览器控制台，发现按需加载远程文件下载失败。emmm~，继续狡辩，这肯定是公司基础设施不好，网络太不稳定了，怪不得我！虽然我极力狡辩，但考的同学不信，就认定是我的问题……一切都是有据可依的，静下心来想一想，如果真的是我的问题，会不会呢？不尴尬吗？为了挽回局面，我故作镇定地说：“这个问题是网络波动引起的，虽然我们的基础设施环境不是很好，但是为了尽可能的提高用户体验，还是让我试试看如何优化吧，加入错误监听重试机制，提升用户体验，追求完美！”，赶快回去看看如何解决吧...1.ErrorBoundariesReact官方关于《关于》的介绍错误边界”：https://reactjs.org/docs/error-boundaries.htmlUI一部分中的JavaScript错误不应破坏整个应用程序。为了为React用户解决这个问题，React16引入了“错误边界”的新概念。简单翻译一下，UI渲染过程中出现的错误不应该阻塞整个应用程序的运行。为此，React16提供了“错误边界”的新概念。也就是说，我们可以使用“错误边界”来优雅地处理React中的UI渲染错误。React中的懒加载使用的是Suspense包，其下的子节点出现渲染错误，即组件文件下载失败，并没有抛出异常，也没有办法捕获错误，所以ErrorBoundary可以正好用来判断子节点出现渲染错误（常见于白屏）时的处理方式。注意：错误边界无法捕获以下类型的错误：事件处理（了解更多）异步代码（例如setTimeout或requestAnimationFrame回调）来自ErrorBoundary组件本身的服务器端呈现错误（不是来自其包装的子节点中发生的错误）2.作为“CV工程师”自然要向老大学习：classErrorBoundaryextendsReact.Component{constructor(props){super(props);this.state={hasError:false};}staticgetDerivedStateFromError(error){//UpdatetestatesothenextrenderwillshowthefallbackUI.return{hasError:true};}componentDidCatch(error,errorInfo){//你也可以将错误记录到错误报告服务logErrorToMyService(error,errorInfo);}render(){if(this.state.hasError){//你可以渲染任何自定义的fallbackUIreturn

Somethingwentwrong.