什么是create-react-app中的“npm run build”？

Question

我找不到关于“npm run build”工作的任何解释，

它简单易用，我得到的“build”文件夹效果很好，

但是，在create-react-app中，场景背后会发生什么？

它是一个完全不同的构建工具使用？

如果没有，它是否使用其他构建工具？

Answer 1

开发人员经常将JavaScript和CSS分解为单独的文件。 通过单独的文件，您可以专注于编写更多模块化的代码块来完成一件事。 做一件事的文件会降低你的认知负担，因为维护它们是一项非常麻烦的任务。

场景背后会发生什么？

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

正如您正确地提到的，运行命令（ npm run build ）会创建一个build目录。 现在假设你的app中有一堆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小包。

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

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

Answer 2

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

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

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

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