什麼是create-react-app中的「npm run build」？

Question

我無法找到關於「故宮運行構建」的工作任何解釋，

它是簡單和容易使用，我得到的偉大工程「建設」的文件夾，

但是，在create- react-app，幕後究竟發生了什麼？

它是一個完全不同的使用構建工具嗎？

如果沒有，是否利用其他構建工具？

Answer 1

這裏簡要解釋一下：https://github.com/facebookincubator/create-react-app#npm-run-build-or-yarn-build。

它在生產模式下正確捆綁React並優化構建以獲得最佳性能。

構建被縮小，文件名包含散列。

在幕後，它使用babel to transpile your code and webpack as the build tool捆綁您的應用程序。

Answer 2

開發人員經常將JavaScript和CSS分成單獨的文件。單獨的文件可讓您專注於編寫更多模塊化的代碼塊來完成單一任務。做一件事情的文件會減少你的認知負擔，因爲維護它們是一項相當繁瑣的任務。

究竟幕後發生了什麼？

當您的應用程序轉移到生產環境時，擁有多個JavaScript或CSS文件並不理想。當用戶訪問您的網站時，您的每個文件都需要附加的HTTP請求，使您的網站加載速度較慢。 所以要解決這個問題，你可以創建一個「build」我們的應用程序，它將你所有的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。

做出終審判決： 你可能會問，爲什麼一個構建，甚至是值得的，如果它是所有保存的用戶加載時間幾毫秒。那麼，如果你只是爲自己或其他一些人創建一個網站，那麼你不必爲此煩惱。只有高流量站點（或您希望很快會出現高流量的站點）才需要生成項目的構建版本。

如果您只是在學習開發，或者只是製作流量非常低的網站，那麼生成構建可能不值得您花時間。