Angular 2クイックスタートプロジェクトのバンドルとミニネイションは、初期ロード時のHTTPリクエストを減らす方法ですか？Angular 2クイックスタートプロジェクトのバンドルと縮小
クイックスタートプロジェクトの最初のページが読み込まれると、約300のHTTP要求が生成されますが、時間がかかります。
私はこの呼び出しを減らすためにバンドリングと小型化が役立つことがあることをブログで読んでいます。
アングル2にはさまざまな方法があります。 Webパック SystemJs angular CLI
ただし、クイックスタートプロジェクトでこれらを使用する方法はわかりません。
角型コンパイラを使用してこれを行うことができます。それを実現させるにはいくつかの方法があります。
オプション1：ドッカー すでにドッキングウィンドウおよび/またはドッキングウィンドウ-コンを使用している場合は、これはかなり良いオプション、および超簡単です。私はあなたのアプリケーションのソースを見ることができ、ファイルを保存するたびにそれを構築できるコンテナを作っています。あなたは（！用心、画像が600メガバイトについてです - 申し訳ありませんが、角度のコンパイラは、実際に巨大である）ので、同様にそのコンテナを使用することができます。
docker run --rm -v $(pwd)/src treyjones/ng build -w
この場合、私は、あなたのアプリがsrcであると仮定しています。
またngのための完全なヘルプドキュメントを表示するには、このコマンドを使用することができます。
docker run --rm treyjones/ng -h
実際にオンライン完全なドキュメントを見つけること私に、困難であることが分かっています。
あなたは、このためにドッキングウィンドウを使用しない場合、あなたはまた、単にコンテナが何を行うことができますが、警告が表示され、それはまだただのノードの代わりに、ドッキングウィンドウを通じて、インストール巨大です。このための2つのオプション：
npm i [email protected] -g
オプション2からpackage.jsonでプロジェクトの依存関係として追加：
"devDependencies": {
"angular-cli": "1.0.0-beta.24"
}
beta.24がNPMによって記載されている最新バージョンです。私はベータ版のみを使用しています。しかし、私は構築プロセスが非常にスムーズで、私にとって非常にうまく機能していることを確認できます。
You can read a little bit more about how this is intended to work on github。あなたは通常、webpackとしてバンドラを使用して、いわゆるバンドルを作成する小さなファイルの数百に負荷がかかるのを避けるため
。 Webpackは、プロジェクト内の依存関係を解決するためのツールで、Typescript、Javascript、ES2015モジュールのインポートなどのツールを提供します。
物事がangular2-webpack-starterプロジェクトを見てどのように動作するかのアイデアを得るために。
また、Angular CLIは、フードの下でウェブパックを使用します。
webpackの使用に興味がある人は、学習曲線がかなり険しいと言いましょう。上記のangle2-webpack-starterプロジェクトのような完全なプロジェクトを理解しようとすることから始めないでください。代わりに、webpackチュートリアルのgetting startedセクションのような簡単なものから始めましょう。
これを行うために私が見つけた最も簡単な方法は、成長の余地があり、角度2のプロジェクトにこの「テンプレート」を使用することです。また、プロダクションのためにビルドするときに、優れたビジュアライゼーションを提供します。 AoT, Minification, Webpack, etc... template