web-dev-qa-db-ja.com

angular-cliを使用してCDNから外部ライブラリをロードする

Angular-cliを使用して、アプリコードをバンドルするが、Angular2フレームワークやその他の大きな外部JavaScriptライブラリをバンドルされたコードに含めないアプリを構築したいと思います。ページがロードされるときに、CDNからこれらのライブラリをロードしたいと思います。これを行う方法はありますか？

また、使用しているAngular2フレームワークの一部のみがロードされるローカルビルドの利点を維持しながらこれを行う方法はありますか？

私はこの質問を見ましたが、それはSystemJS用であり、Angular-cliには適用されないと思います： CDNとSystemJSを使用してangular2をロードする方法

javascriptangularangular-cli
26
Chris

CDNを指す適切な<script src="">タグをindex.htmlファイルに追加するだけです。 .jsファイルをangular-cli.jsonから削除して、アプリにバンドルされないようにしてください。

現在、Angular 2 jsファイル自体に対してはできません。これらは自動的にアプリにバンドルされます。最新の更新により、Webサーバーとブラウザはベンダーファイルをキャッシュできるようになります。アプリのすべての訪問者に再ダウンロードされるのではなく、ハッシュが変更されたときにのみ再ダウンロードされます。

12
Alexander Ciesielski

Angularバージョン2以降でアプリケーションを作成するときは、使用するAngularプラットフォームの部分のみを含むビルドシステムを使用します。テンプレートはビルド時にコンパイルでき、ビルドプロセスを実行できますバンドルされたペイロードからテンプレートコンパイラを削除します最後に、ビルドプロセスはコードの静的分析を使用してツリーシェーキングを行い、プラットフォームの未使用部分をペイロードバンドルからさらに削除します。

CDNからAngularを提供する場合、キッチンシンク、プラットフォーム全体である必要があります。これは非常に大きく、アプリケーションに悪影響を及ぼします。

必要なプラットフォームの部分をangle-cliバンドルできるようにした方がはるかに良いでしょう。 WebPack treeshakingプラグインが改善されると、バンドルサイズが小さくなります。

8
Martin

Akamai などのアプリ全体をCDNに追加します。たとえば、（アプリの構造に応じて）以下のリストにあるようなファイルをキャッシュできます...

  • index.html
  • リストアイテム
  • application.css
  • application.js
  • templates.js
  • vendors.css
  • vendors.js

これにより、AngularフレームワークファイルをCDNにキャッシュするだけでなく、パフォーマンスがさらに向上します。

4
Ben Cameron