ReactJSのプロダクションビルドと開発ビルドの違い
最近、私は反応を学び始め、彼らがWebpackを使用して生産ビルドと開発ビルドを作成するチュートリアルを見ました。しかし、これら2つのビルドの違いは何で、どのビルドをいつ使用する必要があるのかについては説明がありませんでした。インターネットを検索しましたが、私を助けてくれるものは見つかりませんでした。誰かが私が見逃した/読んでいないチュートリアルや説明を持っていますか？
開発ビルドは、名前が示すとおり、開発上の理由で使用されます。これらのビルドには、ソースマップ、デバッグ、そしてしばしばホットリロード機能があります。
一方、プロダクションビルドはプロダクションモードで実行されます。つまり、これはクライアントのマシンで実行されるコードです。実動ビルドはuglifyを実行し、ソースファイルを1つまたは複数の最小化されたファイルにビルドします。また、CSSと画像、そしてもちろんWebpackで読み込んでいる他のソースも抽出します。ソースマップやホットリロードも含まれていません。
生産と開発を明確に区別するものは、好みと要件に依存します。つまり、Webpack構成に記述した内容に大きく依存します。
webpack-production documentation は非常に簡単です。また、記事 Webpack 3 + React — Production build tips では、ReactでWebpackを使用した場合の本番ビルドの作成プロセスについて説明しています。
非常に基本的な違いは、Production Buildには、javaい、縮小（圧縮）バージョンのJavaScriptコードがあるため、エンドユーザーのブラウザーでのファイルのレンダリングが非常に迅速になり、パフォーマンスが向上することです。
google plugin extension を適用することにより、本番ビルドがWebサイトで使用されているかどうかを確認することもできます。ブラウザでアクティブにすると、Webサイトがフロントエンドでreact jsを使用している場合また、ビルドタイプが本番か開発かを示します。
reactが開発ビルドの場合、
ReactおよびReact DOMの単一のファイルも利用可能であるため、
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
注：Reactで終わるファイルは
.production.min.jsは生産に適しています。
実稼働環境でのパフォーマンスへの影響がアプリケーションを展開したという理由だけで、本番および開発ビルドが見えてきます。また、アプリケーションがデプロイされる場所はまったく別の大陸であるため、UIで開発ビルドjsファイルをレンダリングするのは、より良いユーザーのために非常に鮮明で、コンパクトで、圧縮され、u化された製品バージョンと比較すると、かなり時間がかかりますUIでの経験と読み込み。情報 ここをクリック