开发人员经常将 JavaScript 和 CSS 分解为单独的文件。单独的文件让您可以专注于编写更多module化的代码块来完成一件事情。做一件事的文件会减少您的认知负担，因为维护它们是一项非常繁琐的任务。

幕后究竟发生了什么？

当需要将您的应用程序移至生产环境时，拥有多个 JavaScript 或 CSS 文件并不理想。当用户访问您的站点时，您的每个文件都需要一个额外的 HTTP 请求，从而使您的站点加载速度变慢。因此，为了解决这个问题，您可以创建我们的应用程序的“构建”，它将您所有的 CSS 文件合并到一个文件中，并对您的 JavaScript 执行相同的操作。这样，您可以最大限度地减少用户获取的文件数量和大小。要创建此“构建”，您需要使用“构建工具”。因此使用npm run build.

正如您正确提到的，运行命令 ( npm run build) 会为您创建一个build目录。现在假设你的应用中有一堆 CSS 和 JS 文件：

css/
  mpp.css
  design.css
  visuals.css
  ...
js/
  service.js
  validator.js
  container.js
  ...

运行后，您npm run build的build目录将是：

build/
  static/
    css/
      main.css
    js/
      main.js

现在您的应用程序的文件很少。该应用程序仍然相同，但被压缩为一个名为build.

最终结论： 您可能想知道为什么构建是值得的，如果它所做的只是为您的用户节省几毫秒的加载时间。好吧，如果您只是为自己或其他几个人制作网站，则不必为此烦恼。只有高流量站点（或您希望很快成为高流量的站点）才需要生成项目的构建版本。

如果您只是在学习开发，或者只制作流量非常低的网站，那么生成构建可能不值得您花时间。

这里简单解释一下：https : //github.com/facebookincubator/create-react-app#npm-run-build-or-yarn-build。

它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。

构建被缩小，文件名包括哈希值。

在幕后，它使用babel 来转译您的代码，并使用 webpack 作为构建工具来捆绑您的应用程序。