“避免过多的 DOM 大小” 如何在 React JS 中减小 DOM 大小？

Question

当我在 PageSpeed 和 LightHouse 中进行测试时，我会做出这样的反应

如何减少？ 如果 react-window 能帮助我，那么如何在登陆页面中使用它？

Answer 1

您可以尝试以下 3 个步骤：

1. 审核您的组件：检查您的组件以查找任何可以删除的不必要的 DOM 元素。有时额外的 div 或 span 用于可以优化的样式目的。

2. 高效渲染：确保仅渲染必要的元素。如果有列表或组件渲染许多子组件，请考虑是否需要一次渲染所有子组件。

3. 使用

   react-window

   或

   react-virtualized

   ：这些库可以帮助您仅渲染用户当前可见的项目（加上一个小缓冲区）。如果您要显示大型列表或表格，这可以大大减少 DOM 元素的数量。

4. 代码拆分：使用代码拆分仅加载用户与其交互的页面所需的代码，从而减少初始加载时间并可能减少 DOM 大小。

5. 延迟加载：如果有不需要立即显示的图像或组件，可以延迟加载它们。这意味着它们只有在即将进入视口时才会被加载。

6. CSS 优化：有时，复杂的 CSS 可能会导致为了样式目的而创建大量元素。看看是否有方法可以使用更少的 CSS 或不太复杂的 CSS 来实现相同的视觉效果。

如果您正在使用

react-window

那么您可以这样使用它：

import React from 'react';
import { FixedSizeList as List } from 'react-window';

const MyList = ({ items }) => (
  <List
    height={150}
    itemCount={items.length}
    itemSize={35}
    width={300}
  >
    {({ index, style }) => (
      <div style={style}>
        {items[index]}
      </div>
    )}
  </List>
);

// Usage:
const items = ['Item 1', 'Item 2', /* ... */];
<MyList items={items} />

不宣传任何东西，但如果你愿意，你可以阅读：How to optimization the DOM size in React JS?

Answer 2

通常，当您尝试在单个组件中写入大量内容时，会发生此错误。 将您的应用程序划分为多个组件并根据您的具体需求延迟加载这些组件。

https://blog.bitsrc.io/lazy-loading-react-components-with-react-lazy-and-suspense-f05c4cfde10c