Angular Js e-commerceプロジェクトの最適化

Question

私は、ロード時間が15秒を超えているAngularJsプロジェクトに取り組んでいます。あまりにも多くのJsとCssのファイルを最適化する方法がありますか？ 1回目の読み込み時にすべてのページが読み込まれます。 JsとCssのロードを必要に応じて行いたい。

どこから始めて最適化できるのですか？いくつかの良いガイドラインとワークフローを提案してください。

Answer 1

考慮すべきいくつかのポイント：

1. をあなたのCSS、JavaScriptとHTMLファイルはgzipでエンコードで提供されていることを確認してください。これにより、pageloadで転送する必要のあるデータ量が大幅に削減されます。

2. JSとCSSが縮小されていることを確認してください。空白がなくなり、ファイルのサイズが小さくなります。

3. 大規模でかさばるライブラリへの依存関係を削除してください。 JQueryは膨大であり、代わりに軽量ライブラリを使用することもあります。

4. ApacheとNGINX用のGoogleのPageSpeedモジュールをご覧ください。これは、javascriptとcssを1つのファイルにコンパイルするなど、いくつかの魔法のタスクを実行できます。 https://developers.google.com/speed/pagespeed/module/

5. 互換性のあるWebサーバーを使用する場合は、HTTP2（または古いサーバーではSPDY）を有効にすることを検討してください。

コンテンツ配信ネットワーク

一部の人々はあなたのJavaScriptファイルを提供する（例えばmaxcdnなどのCDN）パブリックコンテンツ配信ネットワークの利用を促進します。それはファイルが既にサイトを訪問している人々のブラウザにキャッシュされます可能性があります、人気のあるライブラリと

• ：これは、いくつかの潜在的な利点を持っています。

• CDNは一般的にグローバルに配布されているため、世界中で高速で応答性が高くなります。

私は個人的には同意しません。私は、サードパーティのJavaScriptライブラリがすべてローカルに提供されていることを確認しています。その理由は次のとおりです。

• CDNがオフラインまたは持つ問題である場合（これはfallback loadingで多少パッチを適用することができますが）、あなたのサイトが切断されます

  は

• CDNが過負荷または飽和している場合は、あなたのサイトの意志はまた、それは、CDNが危険に晒されたときに失敗

• の別のポイントである、ページの読み込みに少なくとも一つの追加のDNSルックアップを追加し

• 遅くなることが、誰かがいくつかmalicioを置くことができあなたのサイト上で私たちのJavaScript（これは"integrity" checksumを使用することによって回避することができます）

• CDNは、CDNは、ファイルがあなたのサイトの残りの部分とパイプライン化することはできません務め

• ファイルをGoogleのPageSpeedにより、インライン展開組み合わせて最適化することはできません

を務めました