5 个软件包可在开发过程中优化和加速您的 React 应用

在开发阶段使用这些包优化您的 React App，并避免在生产过程中出现问题。

由于时间限制和其他因素，我们不断地构建应用程序，而没有考虑副作用。但有时，应用程序会在实际场景中引发重大问题。这时，我们可能需要更新应用程序，有时可能需要重建某些模块或进行一些架构层面的更改来解决问题。

与其在生产环境中处理此类问题，不如在开发过程中避免。因此，我列出了一些软件包，它们可以帮助你在开发过程中发现此类问题。让我们深入探讨一下。

1. 你为什么要渲染（6.6K ⭐️）

Why-did-you-render是一个 React 包，它能帮你找到潜在的可避免的重新渲染。大多数性能问题都源于不必要的重新渲染。如果一个大型列表组件多次重新渲染，就会让应用无响应。

为了避免这些问题，我们会使用pureComponents或 ，useMemo但在某些情况下，由于错误使用状态更新，它们也会导致重新渲染。我们可以使用why-did-you-render 包来避免这些问题。它会通知组件何时以及为何重新渲染！

注意：仅供开发使用！

查看下图了解警告消息是如何被控制的。

2. 源地图浏览器（3.3K⭐️）

Source Map Explorer提供了构建视图，其中包含每个文件的大小。它可以帮助用户了解哪些依赖项在 bundle 中占用了较大的文件大小。我们可以根据该视图来优化文件。

为什么这很重要？随着应用功能的增长，构建大小也会随之增加。较大的构建大小将花费更多时间。我们需要尽可能地保持较小的构建大小。使用 Source Map Explorer，我们可以分析构建并进行优化。它还支持 Sass 和 LESS 文件。

注意：仅供开发使用！

查看下图。您可以看到文件大小、占用百分比。此外，我们还可以查看每个文件的详细内容。

3. Redux 不可变状态不变（800+⭐️）

Redux Immutable State Invariant是一个 Redux 中间件。它可以检测 Redux 调度之间和调度外部的变更。如果您使用 Redux 进行状态管理，则不应在 Reducer 内部或外部更改状态。因为Reducer始终返回一个新的状态对象。

修改状态会导致应用中出现一些问题。为了避免这种情况，我们可以使用 Redux Immutable State Invariant 中间件。如果状态发生改变，此包会抛出错误。因此，我们可以在开发阶段就修复这些问题。

注意：仅供开发使用！

4. 捆绑包大小（4.2K⭐️）

捆绑包大小可以控制捆绑包的大小。我们可以在配置文件中配置每个文件的大小。这样，如果大小超出范围，我们就会收到警告。这确保了捆绑包的大小在控制范围内。

检查bootstrap使用的以下捆绑包大小配置。

你也可以将它添加到你的 GitHub 来检查每个拉取请求。如下图所示。

5. Immer（20.7K ⭐️）

修改状态会导致更多问题。为了避免这种情况，我们需要手动克隆每个状态对象并对其进行修改。
与其手动克隆，我们可以使用 Immer，它将以更高效、更优化的方式处理它。Immer允许更便捷地修改状态。您也可以在Redux中使用 Immer 修改状态。

检查以下代码以了解 Immer 与 Redux 的使用情况。

资源

你为什么要渲染

源地图浏览器

Redux 不可变状态不变

捆绑包大小

伊默尔

结论

我们还可以使用 react-devtools 和 redux-devtools 来优化应用。希望本文对您有所帮助。感谢您的阅读。

在Twitter上获取更多更新。

你可以给我买杯咖啡来支持我 ☕

电子书

ReactJS 优化技术和开发资源

更多博客

1. Redux Toolkit - 编写 Redux 的标准方法
2. 如何在 React 中以优化和可扩展的方式使用 Axios
3. 15 个自定义 Hooks 让你的 React 组件更轻量
4. 免费托管 React 应用的 10 种方法
5. 如何在单页应用程序中保护 JWT
6. React 18 Alpha：快速概览
7. Redux Auth Starter：零配置 CRA 模板