前に書いてください
最近、職場でのAngular Modular Packagingのコンテンツロードに出くわしました。真ん中にいくつかの落とし穴があると感じたので、ここでマークしました。
プロジェクトの背景：
このプロジェクトは、主にAngularJSをフロントエンドフレームワークとして使用しています。プロジェクトが以前にリリースされたとき、すべてのフロントエンドスクリプトがパッケージ化され、ファイルに圧縮されます。ページが最初にアクセスされるとロードされ、ページの初期ロードが遅くなります。これに基づいて、オンデマンドでロードすることが提案されています。つまり、モジュールのスクリプトは、ユーザーが特定のモジュールにアクセスした場合にのみロードされます。
ツール：
このプロジェクトは、AMD仕様に従ってGrunt Packagingを使用し、Grunt-Contrib-Requirejsを使用してモジュールを圧縮およびマージし、Oclazyloadを使用してAngularモジュールの怠zyな負荷を完了します。
プロジェクトプロセス：
モジュールパッケージ
プロジェクトのコードは基本的にAMD仕様に従って記述されており、Grunt-Contrib-Requirejsは各モジュールをJSファイルに圧縮するために使用されます。
質問1：プロジェクトコードでは、各モジュールは、プロジェクトのプロジェクト/公開指示のサードパーティライブラリ/公共サービスに依存します。コンテンツのこの部分が処理されていない場合、Grunt-Contrib-Requirejsは、各モジュールを圧縮するときに依存するすべてのモジュールをロードし、同じJSファイルに圧縮します。
応答：サードパーティのライブラリ/公共サービスと手順を3つのモジュールに圧縮し、各モジュールのパッケージスクリプトから「除外」を使用して削除します。下の図に示すように：
パブリックモジュールのモジュール名には、対応するパスの下に同じ名前のJSファイルが必要であることに注意する必要があります。
オンデマンドでロードします
モジュールごとにスクリプトをJSファイルにパッケージ化した後、次のステップは、ユーザーリクエストに従って異なるモジュールをロードすることです。このプロジェクトは、UIルーターを使用してルーティングジャンプを処理します。ルートから始めて、モジュールの怠zyなロードを完了することができます。
特定の方法は次のとおりです。ユーザーがルートジャンプを操作する場合、ユーザーが属するモジュールは、ユーザーがジャンプしたい状態に従ってロードされます。これに基づいて、状態とモジュールの間のマッピングを追加する必要があります。最初は、requirejsでロードする必要があります。スクリプトをロードできることがわかりますが、Angularで登録されているコントローラー/サービス/フィルターは機能しません。調査では、Bootstrapメソッドを呼び出した後にAngularによって登録されたコントローラーなどのサービスが再び呼び出されないことがわかりました。これに基づいて、OClazyloadは負荷に導入されます（Oclazyloadには、角度ソースコードの注入と修正があります）。
これまでのところ、オンデマンドのロードは基本的に実装されていますが、まだいくつかの問題があります。
モジュール間のプロジェクト依存関係
一部のモジュール間でプロジェクト間に強い依存関係があるため、処理は構成ファイルのモジュール間に依存関係を追加することです。モジュールをロードする前に、従属モジュールがあるかどうかを確認してください。その場合、従属モジュールは最初にロードされます。従属モジュールがロードされると、現在のモジュールがロードされます。
指示の怠zyなロード。
Angularでは、$コンパイルを使用して、命令間の相互依存を実装できます。これの処理は、命令名と命令モジュールの依存関係を構成することです。特定の命令を使用すると、モジュールが最初にロードされ、次にコンパイル方法が実行されます。このソリューションは、ほとんどの命令依存関係を解決できます。
指示の場所。プロジェクトのほとんどは長いページを使用し、各長ページはいくつかの領域に分割され、各エリアがコマンドです。インターセプトを使用すると問題があります。つまり、各命令の読み込み時間が異なります。最初に戻ってくるコマンドは最初にDOMに追加され、ページレイアウトに不確実性が発生します。解決策は、defferメカニズムを使用することであり、すべての命令がロード/コンパイルされた後、DOMツリーに実行を追加します。
指令間の依存関係：ディレクティブ間にプロジェクトの依存関係もあります。これに対する解決策は、相互依存の命令をモジュールにマージし、同じスクリプトファイルにパッケージ化することです。このソリューションは、ほとんどの命令依存関係を解決できますが、初期化プロセス中に依存関係を解決することはできません。特定の命令がまとめられている可能性があり、命令への依存関係はまだ編集されていません。このような特別な例では、ページが初期化されたときにスクリプトとテンプレートのみがロードされます。
上記は、プロジェクトプロセス全体で発生する問題です。基本的に、あなたが前進するたびに、あなたは穴に足を踏み入れています。あなたが彼らと最初に接触したときの多くのことは、私は何かを学んだと感じています。多くの問題の解決策はあまり明確ではないかもしれません。他の人は上記のすべての問題に遭遇しました。検索エンジンをよく使用し、他の人のコードを自分で読み取り/理解する限り、すべての問題を正常に解決できます。
Angular Lazy Loadingに関するいくつかの落とし穴は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。