create-react-appで「npm run build」とは何ですか？

Question

私は「NPMの実行ビルド」の作業に関するいかなる説明を見つけることができなかった、

それは、シンプルで使いやすいと私は素晴らしい作品「構築」フォルダを取得するには、

しかし、create-で反応アプリ、ちょうどシーンの後ろに何が起こるのですか？

ビルドツールを完全に別の用途に使用していますか？

そうでない場合は、他のビルドツールを利用していますか？

Answer 1

ここで簡単に説明します。https://github.com/facebookincubator/create-react-app#npm-run-build-or-yarn-build

リダンダントを本番モードで正しくバンドルし、最高のパフォーマンスを得るためにビルドを最適化します。

ビルドは縮小され、ファイル名にはハッシュが含まれます。

舞台裏では、babel to transpile your code and webpack as the build toolを使用してアプリケーションをバンドルします。

Answer 2

開発者は、JavaScriptとCSSを別々のファイルに分割することがよくあります。別々のファイルを使用すると、1つのことを行うモジュール化されたチャンクを書くことに集中できます。 1つのことをするファイルは、それらを維持することがかなり面倒な作業です。

シーンの後ろには何が起こりますか？

アプリをプロダクションに移行するときに、複数のJavaScriptファイルまたはCSSファイルを作成することは理想的ではありません。ユーザーがサイトにアクセスすると、ファイルごとにと追加のHTTP要求が必要になり、サイトの読み込みが遅くなります。 これを解決するには、"build"を作成して、すべてのCSSファイルを1つのファイルにマージし、同じことをJavaScriptで行うことができます。この方法で、ユーザーが取得するファイルの数とサイズを最小限に抑えます。この"build"を作成するには、"build tool"を使用します。従って、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という小さなパッケージに圧縮されています。

最終評決： それがないすべてのユーザー負荷時の数ミリ秒を保存している場合は、ビルドが、それにも価値があるなぜあなたは不思議に思うかもしれません。まあ、あなた自身や他のいくつかの人のためだけにサイトを作っているのであれば、これを気にする必要はありません。プロジェクトのビルドを生成するのは、トラフィックの多いサイト（またはすぐにトラフィックが多くなることを望むサイト）にのみ必要です。

開発を学んだり、トラフィックが非常に少ないサイトだけを作成している場合は、ビルドを生成するのは時間がかかりません。