延迟加载和组件

Lazy loading and components

我正在将我的应用程序改为延迟加载,我发现了两种加载组件的方法。

一个是有 X 个组件,只有一个全局 components.module(例如 https://www.9lessons.info/2017/12/ionic-angular-lazy-loading-child-components.html)我们需要在我们的页面上导入。但是如果我们只想要一个组件会怎样?

这是我在某些@mhartington 的回购协议中看到的另一种方式。我们可以再次为每个组件一个 .module ,就像我们对页面所做的那样: https://github.com/mhartington/lazyLoad2-components/blob/master/src/components/music-card/music-card.module.ts

第二种方法比第一种好吗? 如果我们使用延迟加载,将所有组件加载到一个页面上有什么意义?

我在下面写的是 Angular 风格指南的一小段摘录,将帮助您决定采用哪种延迟加载策略。

Angular 中延迟加载模块背后的基本思想是仅在需要时加载模块。实现它的理想方式是创建不同的模块。现在,您的 Angular App:

中通常会有这些类型的模块
  1. App/Main/Root Module - 这将是您的 Angular 应用程序的编排器。初始加载您的 Angular 应用程序所需的所有模块都将驻留在此模块中。
  2. Shared Module - 该模块将包含所有 components/pipes/directives 等,您的 Angular 应用程序中的其他模块将使用这些模块。
  3. Core Module - This module will contain all the single-use components/pipes/directives/services etc. Also, this modules should be imported only once,并且也在您的 App/Main/Root 模块中。
  4. 实用程序模块 - 理想情况下,应该有一个模块用于您正在使用的任何特定第三方功能。这有助于保持 App/Main/Root 模块的清洁。所以理想情况下,如果你使用 Angular Material 例如,那么你应该创建一个模块,导入所有组件的所有模块,你将在你的 Angular 应用程序中使用,并且然后从这个模块导出它,这样任何想要使用 Angular Material 组件的模块都可以导入并使用它。
  5. Feature Modules - These are the modules that should ideally be lazy loaded. An Angular App should ideally be broken down into logically separated features and each of these modules should comprise of one such logically separated feature。这允许我们随后延迟加载它们。

牢记所有这些要点,您应该以这种方式分解您的 Angular 应用程序,以便清楚哪些模块是 功能模块 并且可以延迟加载.