anglejsにテンプレートをプリフェッチすることの利点はありますか？

Question

アプリケーションの最適化に関するご質問があります。私は複数のディレクティブを持つアプリケーションを持っているので、私は1分を構築することに決めました。それらのすべてのためのCSSとjsファイル。しかし、同時に、私は別の方法を考えていました。

大きな最小化されたHTMLファイルを1つ作成するとどうなりますか？アンギュラがscriptタグからテンプレートを含むことができます。その場合は

<script type="text/ng-template" id="tempName"> Template content </script>

、何が一つの大きなファイル内のすべてのディレクティブのHTMLを注入する欠点でしょうか？必要なときに、複数の小さなファイルと発射要求よりも優れていますか？ 複数のビューを持つ大きなアプリケーションがあればそれほどうまくいかないかもしれませんが、ユーザーはほとんど表示されません。私の考えは、小さなディレクティブのためにこのファイルを構築することです。それは問題を引き起こしませんよね？

あなたはこれについてどう思いますか？

Answer 1

このようなテンプレートをキャッシュするアプローチには賛否両論があります。

長所：

• テンプレートをフェッチする必要はありません - 、オフライン機能
• ネットワークが遅く、フェッチこのディレクティブ、ルートとしていくつかの遅れを引き起こすことが起こっている場合に適して解決する必要があります含めますtemplateUrlこのような場合、プリフェッチはフィーリングの滑らかさを改善するのに役立ちます。
• プリフェッチでは、テンプレートをプレコンパイルして、templateCacheに格納されたまま使用できるようにします。

短所：大規模なアプリケーションで

• すべてのテンプレートがプリフェッチされている場合、我々は、本質的にはほんの一握りが慣れる可能性がある場合、すべてのテンプレートを保存するために、より多くのメモリを利用しています。
• プリフェッチされたテンプレートがロード中にフェッチされると、追加の要求が発生します。

プロがあなたのように、いくつかのビルドツールなど を使用したい場合があり、アプリケーションに超えている場合：

• gulp-angular-templatecache
• webpack-templatecache
• grunt-angular-templatecache
• ...以上

Answer 2

あなたが含む各ファイルは、ブラウザが前後しなければならない追加のリクエストです。したがって、同じページにそれを含めることができれば、より速く効率的になるはずです。複数で除外する主な理由ファイルは単に組織のためのもので、ページ読み込み時間が0.01ms異なるものです。

gruntのようなものを別々のファイルで使用して、そのファイルを自動的に連結して最適化して最適化することもできます。