React 性能：通过 Tree Shaking 提升性能

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《React 性能：通过 Tree Shaking 提升性能》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

tree shake 是现代 javascript 开发中的一项基本技术，特别是对于像 react 这样的库。它有助于从最终捆绑包中消除未使用的代码，从而减小文件大小并提高应用程序性能。

或者正如 mdn 所说的

tree shake 是 javascript 上下文中常用的术语，用于描述死代码的删除。

什么是树摇动？

tree shaking 是 javascript 捆绑器（如 webpack 和 rollup）中使用的术语，用于描述从最终 javascript 捆绑包中删除未使用的代码的过程。它的工作原理是分析代码库中的导入/导出语句，找出实际使用的代码部分，并消除其他所有内容。

“tree shake”这个名字来自于摇动一棵树并让未使用的树枝（代码）掉落的类比，只留下最终构建中必要的部分。

为什么 react 开发者应该关心 tree shaking？

作为 react 开发人员，减少 javascript 包的大小会对应用程序的性能产生重大影响。大捆绑会导致加载时间缓慢和用户体验不佳，尤其是在移动网络上。 tree shaking 有助于确保最终构建中仅包含您实际使用的代码，这可以显着提高性能。

tree shaking 在 react 中如何工作？

tree shaking 严重依赖于 es 模块 (esm)。当您使用 esm 语法导入和导出模块时，webpack 和 rollup 等捆绑器可以分析您的代码并删除未使用的导出。

例如，假设您正在使用一个大型实用程序库，但您只需要一个函数：

// bad practice: importing everything
import * as lodash from 'lodash';

在这种情况下，即使您只使用一个函数，整个 lodash 库也会被捆绑。这效率低下并且会增加您的应用程序大小。

相反，您可以使用命名导入：

// good practice: importing only what you need
import { debounce } from 'lodash';

这样，您的捆绑包中仅包含 debounce 函数，而排除了其余的 lodash 代码，从而使您的应用程序变得更小。

在 react 中启用 tree shaking 的最佳实践：

1.使用es模块（esm）：

当您的代码和使用的库是用 esm 编写时，tree shaking 效果最佳。如果可能，请避免使用 commonjs，因为它不支持树摇动。

2. 仅导入您需要的内容：

如上所示，始终使用命名导入或导入特定函数而不是整个库。

3.消除副作用：

tree shaking 依赖于导入模块没有副作用的假设。 “副作用”可能是任何改变全局状态、修改变量或在模块本身之外执行代码的行为。确保您的模块不会产生可能阻止 tree shaking 工作的意外副作用。

4. 配置您的捆绑器：

确保您的捆绑器（如 webpack 或 rollup）已正确配置为 tree shaking。这通常包括启用生产模式以实现优化。

5.利用package.json“sideeffects”字段：

如果您正在使用库，甚至是您自己的项目，请确保在 package.json 中标记有副作用的文件。这有助于捆绑器了解什么可以安全地进行 tree-shaking。

示例：

"sideEffects": [
  "*.css",
  "*.scss"
]

分析和测试 tree shaking 的工具：

• webpack 包分析器：此工具可帮助您可视化包的内容并查看是否仍包含任何未使用的代码。
• 源映射：使用源映射来跟踪最终包中包含的内容。

需要采取的想法：

对于想要构建高效、快速应用程序的 react（而不仅仅是）开发人员来说，tree shaking 是一项重要的优化技术。通过遵循最佳实践，例如使用 es 模块、仅导入必要的代码以及确保模块无副作用，您可以充分利用 tree shaking 并显着提高 react 应用程序的性能。

如果您希望提高应用程序的性能，那么实现 tree shaking 是一个很好的起点！

理论要掌握，实操不能落！以上关于《React 性能：通过 Tree Shaking 提升性能》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！