web-dev-qa-db-ja.com

Angular 2：アプリのサイズを縮小する（バンドル/縮小に加えて）

私は中小サイズです（（TypeScriptトランスパイルされた）JS + HTMLテンプレートだけを含めて約28KB）Angular 2アプリ。

もともとは angular.ioクイックスタート に基づいていますが、現在はデプロイにJSPMを使用してバンドル/縮小しています。

私が入手したバンドルされたJSファイルは2.1MBで、gzip圧縮を使用すると449KBになります。

これはまだかなり大きいので、展開するアプリの全体的なサイズを縮小して、アプリを最小かつ最も効率的なバンドルで提供するための最善の方法を尋ねたいと思います。

編集：RxJS演算子を個別にインポートすることで、圧縮されていないが縮小されたバンドルサイズを1.9MBに減らしたことに言及する必要があります。 import 'rxjs/add/operator/map';;その上に私が探しているサイズの節約。

よろしくお願いします。

angularrxjsproduction-environmentbundling-and-minificationjspm
9
Harry

Angular 2が2.0.0になったので、 Angular apps （つまり、TypeScriptから）の事前コンパイルに関するドキュメント+ HTMLテンプレートからJavascript）。

コンパイルにより、（テンプレート）コンパイラがAngular 2から削除され、Angular 2ペイロードが半分になります。

Gunter Zochbauerが述べたように、 rollup を使用したツリーシェイクがサポートされ、バンドルサイズがさらに小さくなります。

Angular CLI での本番バンドルでツリーシェイクがサポートされるようになり、開発中もAoTコンパイルがサポートされます。

変更なしの[email protected]新しいプロジェクトの場合：

ng build --prod：

3.9K styles.b52d2076048963e7cbfd.bundle.js
183K main.8b778eea5dd35968ef66.bundle.js.gz
805K main.8b778eea5dd35968ef66.bundle.js

ng build --prod --aot：

3.9K styles.b52d2076048963e7cbfd.bundle.js
99K  main.a2eb733289ef46cb798c.bundle.js.gz
452K main.a2eb733289ef46cb798c.bundle.js

つまり、基本的な動作中のアプリは、AoTコンパイル、ミニファイ、ツリーシェイク、およびgzipを使用して100KB未満になりました。

8
Harry

プロセス後にサーバーから受信するため、page/css/scriptsのサイズチェックに https://tools.pingdom.com を使用します。

まず、サーバー側で「gzip」を使用します。gzip=> 3mbを使用する前に、gzip560kbの後に使用します。

次に、ビルドにこのコマンド「ng build -e = prod --prod --no-sourcemap--aot」を使用します。

「ngbuild」ページサイズを使用する場合=> 560kb、「ngbuild -e = prod --prod --no-sourcemap--aot」を使用した後ページサイズ=> 227kb

私はMEANスタックに取り組んでいました、これらはページサイズを減らすのに大いに役立ちましたそれが役立つことを願っています

1
Daniyal Javaid