☰

Angular アプリを本番環境にバンドルする方法 質問する

tag-icon • tag-icon angular webpack systemjs angular-cli
Angular アプリを本番環境にバンドルする方法 質問する

ライブ Web サーバーで運用するために Angular (バージョン 2、4、6、...) をバンドルする最適な方法は何ですか。

後続のリリースに移行したときに適切に追跡できるように、回答に Angular のバージョンを含めてください。

ベストアンサー1

2 to 17(TypeScript) と Angular CLI

ワンタイムセットアップ

  • npm install -g @angular/cli
  • ng new projectFolder新しいアプリケーションを作成します

バンドルステップ

  • ng build(ディレクトリが の場合、コマンド ラインで実行しますprojectFolder)。

    実稼働用のフラグprodバンドルがデフォルトになりました（Angular ドキュメント必要に応じてカスタマイズします。

  • 圧縮方法Brotli 圧縮次のコマンドを使用してリソース

    for i in dist/*/*/*; do brotli $i; done

バンドルはデフォルトで生成され、projectFolder/dist(/$projectFolder{/,/browser} for v6+)

出力

17.0.9事前レンダリングなしのAngular とオプション CSS によるサイズ

  • dist/main.[hash].jsアプリケーションがバンドルされました [サイズ: 新しい Angular CLI アプリケーションが空の場合は 193 KB、圧縮した場合は53 KB ]。
  • dist/polyfill-[es-version].[hash].bundle.jsポリフィル依存関係 (@angular、RxJS...) がバンドルされています [サイズ: 新しい Angular CLI アプリケーションが空の場合は 33 KB、圧縮した場合は11 KB ]。
  • dist/index.htmlアプリケーションのエントリ ポイント。
  • dist/runtime.[hash].bundle.jswebpack ローダー
  • dist/style.[hash].bundle.cssスタイルの定義
  • dist/assetsAngular CLIアセット構成からコピーされたリソース

展開

ローカル HTTP サーバーを起動するコマンドを使用してアプリケーションのプレビューを取得できます。ng serve --prodこれにより、実稼働ファイルを含むアプリケーションに http://localhost:4200 を使用してアクセスできるようになります。これを実稼働で使用するのは安全ではありません。

dist実稼働環境で使用する場合は、選択した HTTP サーバーのフォルダーからすべてのファイルをデプロイする必要があります。

おすすめ記事