Webpack 环境变量性能答案

【问题标题】：Webpack Environment Variable PerformanceWebpack 环境变量性能
【发布时间】：2018-07-01 17:11:22
【问题描述】：

当我遇到以下行时，我正在阅读webpack performance best practices：

请注意，检查任何环境变量的值都会导致性能损失，因此应谨慎进行。

所以我的问题是为什么检查环境变量（例如process.env.NODE_ENV）的值如此昂贵？

【问题讨论】：

标签： javascript node.js webpack environment-variables

【解决方案1】：

process.env 不仅仅是一个常规的 JavaScript 对象，而是用 C++ 实现的。跨越 C++ 运行时和 JavaScript 之间的界限非常昂贵，尤其是与简单的对象访问相比。请参阅v8 Engine - Why is calling native code from JS so expensive? 了解其中的一些原因。

严重访问process.env 确实会损害性能，通常可以通过缓存所需的值来避免。例如，React 曾经遇到过 Server rendering is slower with npm react #812 的问题，由于各种 process.env.NODE_ENV !== "production" 条件，这导致了大约 30% 的性能成本。

只要您不过度使用process.env（例如在循环中），您就不必担心性能影响。作为参考，Improving SSR Performance: process.env optimization中显示的基准测试结果：

结果：对未更改的 process.env 的值进行 1 亿次访问耗时 32 秒，而对普通对象 process.env 进行相同数量的访问则耗时 2 秒。

因为process.env 是 Node.js 的一部分并且不存在于浏览器中，所以如果将代码与 webpack 捆绑在一起，您不会受到任何性能影响，因为它提供了所需的值（除非您将 webpack 配置为目标 Node.js)。因此，webpack 中与process.env 相关的任何性能都与构建过程有关。由 webpack 执行并会影响构建时间的唯一来自用户的代码是配置中的任何内容。在大多数情况下，这完全无关紧要，除了经常调用的任何内容，尤其是对于每个处理的文件。例如在加载器或任何定义的函数中，以确定是否应将规则应用于给定文件，以及在较小程度上应用于插件。

【讨论】：