角度共用モジュールとウェブパック

Question

私たちは、Angular with Webpackでモジュールを共有するための正しいアプローチが何かを理解しようとしています。

私たちは、アプリケーションのさまざまな場所で再利用されるコンポーネントを持っています。それらは、アプリケーションのすべてのビューではなく、ほとんどの場合使用されます。

コンポーネントをインポートおよびエクスポートするsharedModuleを作成しました。このsharedModuleは、アプリケーションの必要な領域にインポートされます。

これは私たちが不思議に思うところです。モジュールAがsharedModuleをインポートし、5つの共有コンポーネントのうち2つだけを必要とする場合、インポートされた3つのコンポーネントは何のために必要ではありませんか？

Webpackはツリーの揺れやデッドコードの削除を行うことになっていますが、これを行うにはWebpackに依存したいのですか、sharedModuleを使用せずに必要な部分だけをインポートしますか？

Answer 1

app.moduleに共有モジュールをロードすると、ページにそれらが必要ない場合でも、すべてのコンポーネントとディレクティブが読み込まれます。

共有モジュールを分割し、アプリケーション全体で必要なコンポーネントとディレクティブのみを保持することをお勧めします。

たとえば、3ページだけで3つのコンポーネントが必要な場合は、3つのコンポーネントしか保持しないモジュールを作成し、そのモジュールからエクスポートします。

共有モジュールがかなり大きい場合、パフォーマンスが大幅に向上します。

小さなモジュールにできるだけ分割します。