如何解决React.js中Avoid an excessive DOM size的Lighthouse报错

• 懒加载非关键内容：用React的React.lazy和Suspense组件，只在用户需要时（比如滚动到视图内、点击触发）加载组件，初始渲染时减少DOM节点。如果是长列表，用react-window或react-virtualized实现虚拟滚动，只渲染当前视口内的条目，而非全部数据。
• 合并冗余DOM节点：检查嵌套过深的容器元素，比如多个div嵌套可以合并，用CSS的flex、grid布局替代多余的包裹节点，减少无谓的层级。
• 精准条件渲染：不要渲染当前状态下不可见的元素，用&&或三元运算符控制组件渲染，比如侧边栏收起时直接不渲染，而非设置display:none。
• 清理废弃代码：移除项目里不用的组件、注释掉的DOM元素，若第三方UI组件自带过多嵌套节点，可考虑用自定义轻量组件替代。
• 长列表分页处理：把超长数据列表改成分页加载，每次只渲染当前页的内容，用户切换页码时再渲染对应数据，大幅降低单次渲染的DOM数量。
• 用Fragment减少容器节点：用<React.Fragment>或短语法<>替代多余的div容器，避免为满足React单根元素要求而添加不必要的DOM节点。

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