web-dev-qa-db-ja.com

Angular 2 CLIの巨大ベンダーバンドル：prodのサイズを改善する方法

angular-cliで初期化されたシンプルなアプリがあります。

それは3つのルートに関していくつかのページを表示します。 3つのコンポーネントがあります。このページの1つでは、lodashモジュールとAngular 2 HTTPモジュールを使用してデータを取得します（Rxjs Observables、map、およびsubscribeを使用）。簡単なngForを使ってこれらの要素を表示します。

しかし、私のアプリは本当にシンプルであるにもかかわらず、私は（私の意見では）巨大なバンドルパッケージとマップを入手します。 gzipのバージョンについては話しませんが、gzipを実行する前のサイズです。この質問は単なる一般的な勧告です。

いくつかのテスト結果：

ビルド中

ハッシュ：8efac7d6208adb8641c1時間：10129msチャンク{0} main.bundle.js、main.bundle.map（main）18.7 kB {3} [初期] [レンダリング済み]

チャンク{1} styles.bundle.css、styles.bundle.map、styles.bundle.map（スタイル）155 kB {4} [初期] [レンダリング済み]

チャンク{2} scripts.bundle.js、scripts.bundle.map（スクリプト）128 kB {4} [初期] [レンダリング済み]

チャンク{3} vendor.bundle.js、vendor.bundle.map（ベンダー）3.96 MB [初期] [レンダリング済み]

チャンク{4} inline.bundle.js、inline.bundle.map（インライン）0バイト[エントリ] [レンダリング]

お待ちください：このような単純なアプリ用の10Mbベンダーバンドルパッケージは？

ng build --prod

ハッシュ：09a5f095e33b2980e7cc時間：23455msチャンク{0} main.6273b0f04a07a1c2ad6c.bundle.js、main.6273b0f04a07a1c2ad6c.bundle.map（main）18.3 kB {3} [初期値] [レンダリング済み]

チャンク{1} styles.bfdaa4d8a4eb2d0cb019.bundle.css、styles.bfdaa4d8a4eb2d0cb019.bundle.map、styles.bfdaa4d8a4eb2d0cb019.bundle.map（styles）154 kB {4}レンダリング済み[初期]

チャンク{2} scripts.c5b720a078e5464ec211.bundle.js、scripts.c5b720a078e5464ec211.bundle.map（スクリプト）128 kB {4} [初期] [レンダリング済み]

チャンク{3} vendor.07af2467307e17d85438.bundle.js、vendor.07af2467307e17d85438.bundle.map（vendor）3.96 MB [初期値] [レンダリング済み]

チャンク{4} inline.a345391d459797f81820.bundle.js、inline.a345391d459797f81820.bundle.map（インライン）0バイト[エントリ] [レンダリング済み]

もう一度待ってください。prodのベンダーバンドルサイズはこれと同じくらいですか？

ng build --prod --aot

ハッシュ：517e4425ff872bbe3e5b時間：22856msチャンク{0} main.95eadabace554e3c2b43.bundle.js、main.95eadabace554e3c2b43.bundle.map（main）130 kB {3} [初期値] [レンダリング済み]

チャンク{1} styles.e53a388ae1dd2b7f5434.bundle.css、styles.e53a388ae1dd2b7f5434.bundle.map、styles.e53a388ae1dd2b7f5434.bundle.map（スタイル）154 kB {4} [初期] [レンダリング済み]

チャンク{2} scripts.e5c2c90547f3168a7564.bundle.js、scripts.e5c2c90547f3168a7564.bundle.map（スクリプト）128 kB {4} [初期] [レンダリング済み]

チャンク{3} vendor.41a6c1f57136df286f14.bundle.js、vendor.41a6c1f57136df286f14.bundle.map（ベンダー）2.75 MB [初期値] [レンダリング済み]

チャンク{4} inline.97c0403c57a46c6a7920.bundle.js、inline.97c0403c57a46c6a7920.bundle.map（インライン）0バイト[エントリ] [レンダリング済み]

ng build --aot

ハッシュ：040cc91df4df5ffc3c3f時間：11011msチャンク{0} main.bundle.js、main.bundle.map（main）130 kB {3} [初期] [レンダリング済み]

チャンク{1} styles.bundle.css、styles.bundle.map、styles.bundle.map（スタイル）155 kB {4} [初期] [レンダリング済み]

チャンク{2} scripts.bundle.js、scripts.bundle.map（スクリプト）128 kB {4} [初期] [レンダリング済み]

チャンク{3} vendor.bundle.js、vendor.bundle.map（ベンダー）2.75 MB [初期] [レンダリング済み]

チャンク{4} inline.bundle.js、inline.bundle.map（インライン）0バイト[エントリ] [レンダリング]

だから私のアプリをprodにデプロイするためのいくつかの質問は：

  • ベンダーバンドルはなぜそんなに大きいのですか？
  • 角揺れは木の揺れを正しく使用しているか
  • このバンドルサイズを改善する方法
  • .mapファイルは必要ですか？
  • テスト機能はバンドルに含まれていますか？私はそれらを必要としていません。
  • 一般的な質問：prod用に推奨されるツールは何ですか？多分Angular-Cli（バックグラウンドでWebPackを使用）は最適ではないでしょうか？もっとできますか。

私はStack Overflowに関する多くの議論を検索しましたが、一般的な質問はありません。

angularwebpackangular-cli
107
BlackHoleGalaxy

2018年10月更新

この回答は多くの注目を集めるので、私は新しいAngular最適化でそれを更新するのが最善であると思いました：

  1. 他の回答者が言ったように、Angular v5未満を使っている人にはng build --prod --build-optimizerが良い選択肢です。新しいバージョンでは、これはデフォルトでng build --prodで行われます。
  2. もう1つの選択肢は、アプリケーションをより小さなチャンクに分割するために、モジュールチャンク/遅延ロードを使用することです。
  3. アイビーレンダリングエンジンはまだ生産されていませんが、間もなくバンドルサイズが改善されます
  4. あなたのサードパーティの学士がツリーシェイク可能であることを確認してください。まだRxjs v6を使っていないのなら、そうするべきです。
  5. それでもうまくいかない場合は、 webpack-bundle-analyzer のようなツールを使って、モジュール内で何が肥大化を引き起こしているのかを確認してください。

AOTコンパイルを使用すると、ベンダーバンドルサイズを250 KBに減らすことができると主張する人もいます。しかし、BlackHoleGalaxyの例では、彼はAOTコンパイルを使用していますが、ng build --prod --aotを含めて2.75MBのベンダーバンドルサイズのままで、想定されている250kbよりも10倍大きいままです。たとえあなたがv4.0を使っていても、これはangular2アプリケーションの標準から外れていません。 2.75MBは、特にモバイル機器上で、本当にパフォーマンスを重視する人にとってはまだ大きすぎます。

アプリケーションのパフォーマンスを向上させるためにできることがいくつかあります。

1）AOT＆Tree Shaking（Angular-Cliは箱から出してこれを行います）

2）Angular Universal A.K.A.を使うサーバーサイドレンダリング（cliにはありません）

3）Web Workers（ここでも、cliではなく、非常に要求された機能）
参照： https://github.com/angular/angular-cli/issues/2305

4）サービス員
参照： https://github.com/angular/angular-cli/issues/4006

単一のアプリケーションでこれらすべてを必要としないかもしれませんが、Angularパフォーマンスを最適化するために現在存在しているオプションのいくつかがあります。私は、パフォーマンスの面ですぐに使える欠点をGoogleが認識していることを願っていますし、今後これを改善する予定です。

これは私が上で述べた概念のいくつかについてもっと深く話す参照です：

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

48
Jack Clancy

最新の角度バージョンのCLIを使用し、コマンドを使用しますng build --prod --build-optimizerそれは間違いなく減少します（prod envのビルドサイズ。

これは、ビルドオプティマイザーが内部で行うことです。

ビルドオプティマイザーには、主に2つの仕事があります。まず、アプリケーションの一部を純粋なものとしてマークすることができます。これにより、既存のツールによるツリーの揺れが改善され、アプリケーションの不要な部分が削除されます。

ビルドオプティマイザが行う2つ目のことは、アプリケーションのランタイムコードからAngularデコレータを削除することです。デコレータはコンパイラによって使用され、実行時には必要ないので削除できます。これらの各ジョブにより、JavaScriptバンドルのサイズが縮小され、ユーザーのアプリケーションの起動速度が向上します。

注：Angular 5の1つの更新、ng build --prodは自動的に上記の処理を行います:)

20
Shubhendu Vaid

まず、Angular 2が多くのライブラリに依存しているという理由だけで、ベンダーバンドルは巨大です。 Angular 2アプリの最小サイズは約500KBです （場合によっては250KB、下の投稿を参照）。
ツリーの揺れはangular-cliによって正しく使われています。
.mapファイルをインクルードしないで、デバッグにのみ使用されるためです。さらに、ホットリプレースモジュールを使用する場合は、それを取り外してベンダーを軽くしてください。

プロダクション用にパックするために、私は個人的に Webpack （およびangular-cliもそれに依存しています）最適化やデバッグのために本当にconfigure everythingできます。
もしあなたがWebpackを使いたいのであれば、最初の見方は少々トリッキーですが、ネット上のチュートリアルを見てください、あなたはがっかりしないでしょう。
それ以外の場合は、angular-cliを使用してください。

アプリを最適化し、Angular 2アプリをに縮小するには、 先行コンパイル を使用することが必須です。 250KB.

これは、私が作成したレポジトリです（ github.com/JCornat/min-angular ）。最小のAngularバンドルサイズをテストします。 384kBを得る。最適化する簡単な方法があると確信しています。

AngularClass/angular-starter という設定を使って、ビッグアプリについて話します。これは、上記のリポジトリと同じ、ビッグアプリ用の私のバンドルサイズ（150+コンポーネント）は8MB（マップファイルなしで4MB）から580kBになりました。

11
Jacques Cornat

Lodashはあなたがどのようにしてそこからインポートするかに応じてあなたのバンドルにコードのバグの塊を貢献することができます。例えば：

// includes the entire package (very large)
import * as _ from 'lodash';

// depending on your buildchain, may still include the entire package
import { flatten } from 'lodash';

// imports only the code needed for `flatten`
import flatten from 'lodash-es/flatten'

個人的には私はまだ私の効用関数からより小さなフットプリントを望んでいました。例えば。 flattenは最小化した後、あなたのバンドルに1.2Kまで貢献できます。それで、私は単純化されたlodash関数の集まりを作り上げてきました。私の flatten の実装は50 bytesの周りで貢献しています。それがあなたのために働くかどうか見るためにここにそれをチェックアウトすることができます： https://github.com/simontonsoftware/micro-dash

11
Eric Simonton

次の解決法はあなたがあなたのdist /フォルダをnodejsを使って提供していると仮定します。以下のapp.jsをルートレベルで使用してください

const express = require('express'),http = require('http'),path = require('path'),compression = require('compression');

const app = express();

app.use(express.static(path.join(__dirname, 'dist')));
app.use(compression()) //compressing dist folder 
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
})

const port = process.env.PORT || '4201';
app.set('port', port);

const server = http.createServer(app);
server.listen(port, () => console.log('Running at port ' + port))

依存関係を必ずインストールしてください。

npm install compression --save
npm install express --save;

今すぐアプリを構築する

ng build --prod --build-optimizer

ビルドをさらに圧縮したい場合は、300kb（約）から減らすとし、以下の手順に従ってください。

vendorというフォルダーをsrcフォルダー内に作成し、ベンダーフォルダー内にファイルを作成しますrxjs.tsそして以下のコードを貼り付けます。

export {Subject} from 'rxjs/Subject';
export {Observable} from 'rxjs/Observable';
export {Subscription} from 'rxjs/Subscription';

それから、angle-cliアプリケーションのtsconfig.jsonファイルに次の行を追加します。次にcompilerOptionsに、次のjsonを追加します。

"paths": {
      "rxjs": [
        "./vendor/rxjs.ts"
      ]
    }

これにより、ビルドサイズが小さくなりすぎます。私のプロジェクトでは、サイズを11MBから1MBに縮小しました。それが役に立てば幸い

6
Renil Babu

私が共有したいのは、インポートされたライブラリがどのようにdistのサイズを増やすかということです。 Angular 2-momentパッケージをインポートしましたが、@ Angular/commonからエクスポートされた標準のDatePipeを使用して、必要なすべての日付時刻フォーマットを実行できました。

Angular 2-Momentの場合"angular2-moment": "^1.6.0",

チャンク{0} polyfills.036982dc15bb5fc67cb8.bundle.js（ポリフィル）191 kB {4} [初期] [描画]チャンク{1} main.e7496551a26816427b68.bundle.js（初期）2.2 MB {3} [初期]チャンク{2}スタイル.056656ed596d26ba0192.bundle.css（スタイル）69バイト{4} [初期] [レンダリング]チャンク{3} vendor.62c2cfe0ca794a5006d1.bundle.js（ベンダー）3.84 MB [初期] [レンダリング] chunk {4 inline.0b9c3de53405d705e757.bundle.js（インライン）0バイト[エントリ] [レンダリング]

Angular 2-momentを削除して代わりにDatePipeを使用した後

チャンク{0} polyfills.036982dc15bb5fc67cb8.bundle.js（polyfills）191 kB {4} [初期] [チャンク{1} main.f2b62721788695a4655c.bundle.js（初期）2.2 MB {3} [描画]チャンク{2}スタイル.056656ed596d26ba0192.bundle.css（スタイル）69バイト{4} [初期] [レンダリング]チャンク{3} vendor.e1de06303258c58c9d01.bundle.js（ベンダー）3.35 MB [初期] [レンダリング] chunk {4 inline.3ae24861b3637391ba70.bundle.js（インライン）0バイト[エントリ] [レンダリング]

ベンダーバンドルが半分メガバイト減少したことに注意してください！

要は、外部のlibに慣れ親しんでいても、角度のある標準パッケージで何ができるのかをチェックする価値があります。

5
kwalski

バンドルを減らすもう一つの方法は、JSの代わりにGZIPを提供することです。 2.6mbから543koに行きました。

https://httpd.Apache.org/docs/2.4/mod/mod_deflate.html

2
Stefdelec

私の場合はこれでサイズが小さくなりました。

ng build --prod --build-optimizer --optimization

このコマンドを実行した後のサイズは1.7MBから1.2MBに減少しましたが、私の生産目的には不十分です。

私はFacebookのメッセンジャープラットフォームで作業し、メッセンジャーアプリはメッセンジャープラットフォームで実行するために1MB未満である必要があります。効果的な木の揺れの解決策を見つけようとしていますが、それでも運はありません。

1
Mahesh Sharma

Angular 8+を使用していて、バンドルのサイズを減らしたい場合は、Ivyを使用できます。 src/tsconfig.app.jsonに移動して、angularCompilerOptionsパラメーターを追加します。次に例を示します。

{
  "extends": ...,
  "compilerOptions":...,
  "exclude": ...,

/* add this one */ 
  "angularCompilerOptions": {
    "enableIvy": true
  }
}
0
Rachel

ng build --prodの "production"という名前の設定があることを確認します。ngbuild --configuration = productionの短縮形です - 問題が解決しないため、問題を解決できません画面の真正面に。私はこれが非常に一般的かもしれないと思います...私は国際化にすべての設定を改名してアプリを国際化しました。プロダクション次に、デフォルトの最適化が使用され、最適に近くなるはずであると仮定して、ng build --prodを使用して構築しましたが、実際にはng buildが実行され、250kbではなく7mbバンドルになりました。

0
antidote

私は圧縮の助けを借りて角張った5 +春のブートアプリ（application.properties 1.3+）を持っています（リンクは下記のリンク）2.7 MBから530 KBにmain.bundle.tsサイズのサイズを減らすことができました。

また、デフォルトで--aotと--build-optimizerは--prodモードで有効になっているので、これらを別々に指定する必要はありません。

https://stackoverflow.com/a/28216983/9491345

0
sah1