CLI-Angular でプロダクション用にビルドする

Web アプリケーションが作成され、デプロイの準備ができたら、Angular がすべての異なるコードスニペットを 1つのビルドにコンパイルする必要があります。ビルドは小さいサイズに圧縮されます。

この最後のステップで、いくつかの小さな問題が発生することになります。アプリを構築するために経験した厳格さを考えると、これは非常に苛立たしい経験になる可能性があります。

これは孤立した問題であると考えるのは簡単ですが、改ざんされていない新しいプロジェクトでも同じ問題が発生します。発生した大きな問題の 1つは、main.js が作成されない場合です。次に、次のような他の警告が表示されます。

1. 未使用の関数を削除します。
2. 初期化におけるサイト効果。

CLI を解決する方法-ビルドの問題

さまざまな実用的なソリューションに飛び込む前に、Angular のさまざまなフラグ設定を見てみましょう。

# Prod these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# Dev and so are these
ng build --target=development --environment=dev
ng build --dev --env=dev
ng build --dev
ng build

Angular で --prod を使用すると、フラグを立てられない設定がいくつか設定されます。

1. .angular-cli.json で構成されている場合、Service Worker を追加します。
2. モジュールの process.env.NODE_ENV を production 値に置き換えます（これは、react などの一部のライブラリで必要です）。
3. コードで UglifyJS を実行します。

プロジェクトがビルドされているとき、ng build --env=prod などのコマンドは、ファイルを圧縮しないため、優れたビルドプロダクションジョブを実行しません。もう 1つ覚えておくべきことは、AOT が実装されていることを確認することです。AOT は、デフォルトで主にアクティブになっています。

ng build --prod コマンドは、Ahead of Time（AOT）が実装されている場合に機能するはずです。動作しない場合は、ng build --prod --aot=false コマンドを使用してください。

ng serve --prod コマンドは、Angular で enableproduction 機能が有効になっている場合にも機能します。このコマンドは、アプリの読み込み時間を大幅に短縮するのにも役立ちます。