什么是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.

正如您正确地提到的,运行command(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 作为构建工具来捆绑您的应用程序。