angular.js - AngularJS 单页面应用首页加载优化有哪些方法？

Question

传统网页的请求中，数据在服务器端加载到模板上，一步就可以完成。

1. 下载 HTML
2. 下载 CSS / javascript
3. 渲染

单页面应用需要先下载框架，然后才能开始加载数据。

1. 下载 HTML
2. 下载 CSS / javascript
3. 下载数据 / 模板
4. 渲染

有什么办法减少请求次数，或是将这种串行加载变成并行的方法呢？

Answer 1

完璧な解決策は、最初の画面をサーバー側でレンダリングすることですが、Angular はこれが苦手なようで、実際の解決策を見たことがありません

少し悪いことに、少なくともサーバーはページの最初の画面データを吐き出すことができます

さらに、いくつかの基本的な CSS テンプレートと JS のコンパイルとマージは最も基本的なものでなければなりません

Answer 2

gulpツールを使用する
css をファイルに、js をファイルに、テンプレートを js ファイル ($templateCache) にパックし、js ファイルと一緒にパッケージ化できます。
それから
です 1 HTML をダウンロードします (最初のリクエスト、純粋に静的なページには、いくつかの Angular テンプレート コンテンツが含まれる場合があります。このページはすぐに応答するはずです)
2 CSS をダウンロード (1 回のリクエスト)
3 JavaScript ファイルとテンプレート js ファイルをダウンロードします (1 回のリクエスト)
4 角度レンダリング ページ
合計 3 つのリクエストと他の Ajax リクエストが完了しました。

リーリー

Answer 3

オンデマンドでロードできるrequireJs + angularJsAMDを使用することをお勧めします。
リンク転送: https://github.com/marcoslin/angularAMD

Answer 4

angularjs は圧縮後 170 kb 以上になります。モバイル側にある場合は、PC 側でも考慮する必要があります。 。 Teambition フロントエンドの m リソースを見てみると、それは単なる読み込みではありません。

Answer 5

ビジネスとデザインから始めて、grunt などの一般的に使用されるツールは、1 回限りの読み込み用に lib.min.js をパッケージ化し、非常に一般的に使用される遅延読み込みを行うことができます