延迟加载和组件 [英] Lazy loading and components

问题描述

我将应用程序转移到延迟加载状态，发现了两种加载组件的方法.

I'm moving my app to lazy loading and I found 2 ways of having components loaded.

一个包含X个组件，而只有一个全局component.module(例如 https://www.9lessons.info/2017/12/ionic-angular-lazy-loading-child-components.html )，我们需要在我们的页面上进行导入.但是，如果我们只需要一个组件会发生什么?

One is having X components and just one global components.module (e.g. https://www.9lessons.info/2017/12/ionic-angular-lazy-loading-child-components.html) that we'd need to import on our pages. But what happens if we just want one component?

那是我在@mhartington的回购中看到的另一种方式.我们可以像使用页面一样在每个组件上再有一个.module: https://github.com/mhartington/lazyLoad2-components/blob/master/src/components/music-card/music-card.module.ts

That's the other way which I saw on some @mhartington's repo. We could have again one .module per component as we have with pages: https://github.com/mhartington/lazyLoad2-components/blob/master/src/components/music-card/music-card.module.ts

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

Is this second way better than the first one? What's the point of having all component loaded on one page if we're using lazy loading?

推荐答案

我在下面写的是Angular风格指南的简短摘录，它将帮助您确定哪种延迟加载策略.

What I'm writing below is a short excerpt from Angular's Style Guide and will help you decide which your Lazy Loading Strategy.

在Angular中延迟加载模块的基本思想是仅在需要时才加载模块.实现它的理想方法是创建不同的模块.现在，您的Angular应用中通常会包含以下类型的模块:

The basic idea behind Lazy Loading modules in Angular is to load a module only if it's required. The ideal way of implementing it is to create different modules. Now, there would generally be these types of modules in your Angular App:

1. 应用/主/根模块 -这将是您的Angular应用的协调器.最初加载Angular App所需的所有模块都位于该模块中.
2. 共享模块 -此模块将包含Angular App中其他模块将使用的所有组件/管道/指令等.
3. 核心模块 -该模块将包含所有一次性使用的组件/管道/指令/服务等.此外，此模块应为仅导入一次，并且也导入了您的App/Main/Root模块内部.
4. 实用程序模块-理想情况下，应该有一个用于您使用的任何特定第三方功能的模块.这有助于保持App/Main/Root模块的清洁.因此，理想情况下，例如，如果您使用Angular Material，则应为此创建一个模块，该模块将导入您将在Angular App中使用的所有组件的所有模块，然后从该模块中导出，这样任何想要使用Angular Material Components的模块都可以导入并使用它.
5. 功能模块 -这些是理想情况下应延迟加载.理想情况下，应将Angular应用分解为逻辑上分离的功能，并且每个模块都应包含一个这样的逻辑上分离的

1. App/Main/Root Module - This would be the orchestrator of your Angular App. All the modules, required to initially load your Angular App would reside in this module.
2. Shared Module - This module will contain all the components/pipes/directives etc, that would be used by other modules in your Angular App.
3. Core Module - This module will contain all the single-use components/pipes/directives/services etc. Also, this modules should be imported only once, and that too, inside your App/Main/Root Module.
4. Utility Modules - Ideally there should be a module for any specific third-party feature that you're using. This helps to keep the App/Main/Root Module clean. So ideally, if you're using Angular Material for eg, then you should create a module for that that imports all the modules for all the components, that you'd be using in your Angular App, and then export it, from this module, so that any module, that wants to use Angular Material Components, could import it and use it.
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. This allows us to then lazy load them.

请牢记所有这些要点，您应该以这种方式分解Angular App，以便清楚地了解哪些模块是功能模块并可以延迟加载.

Keeping all these points in mind, you should break your Angular App down in this way so that it's clear which modules are Feature Modules and can be lazy loaded.

这篇关于延迟加载和组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！