Angular 6/7 默认使用急切/延迟加载？ [关闭]答案

【问题标题】：Angular 6/7 by default uses Eager/Lazy loading? [closed]Angular 6/7 默认使用急切/延迟加载？ [关闭]
【发布时间】：2018-11-17 02:46:30
【问题描述】：

正如标题所说，我们是否需要为模块手动实现延迟加载，还是 Angular 6/7 默认会这样做？

【问题讨论】：

【解决方案1】：

Angular 默认使用预先加载，除非另有说明。

要实现延迟加载，需要在RouterModule 中指定以下内容：

Angular 的官方文档中提供了一个非常好的guide，您可以按照它来实现模块的延迟加载。

这里有一个Sample StackBlitz，您可以按照它来实现延迟加载。

【讨论】：

【解决方案2】：

当您构建应用程序（使用 ng build）时，它会将其捆绑到多个 *.js 脚本文件中，并将对这些脚本文件的引用添加到您的 index.html 文件中。这些是您部署到后端服务器的文件。

当用户访问您的网站 (www.yoursite.com) 时，它会找到托管该网站的服务器，并下载 index.html 文件和包含所有代码的所有引用脚本文件。然后将该代码加载到浏览器中。

延迟加载涉及将您的应用程序捆绑到额外的捆绑包中，以便在 index.html 文件下载时不会全部拉下应用程序。这为用户改进了页面的“首次加载”。其他捆绑包随后“按需”下拉（即当用户访问延迟加载路径上的路由时）或在初始加载后在后台异步。

默认情况下，Angular 不做延迟加载。这是你定义的东西。

首先，您将应用程序划分为 Angular 模块。延迟加载由模块定义。每个模块都定义了一组相关的组件、指令和管道。

然后你使用特定的语法来延迟加载这些模块，使用路由配置中的语法，如下所示：

  {
    path: 'products',
    loadChildren: './products/product.module#ProductModule'
  },

Angular 然后将每个延迟加载的模块捆绑到自己的脚本文件中，与 index.html 文件中引用的脚本分开。

【讨论】：

好的，我想我明白了，但如果我错了，请纠正我。延迟加载模块与延迟加载组件相同吗？还是完全不同？或者我们根本不能延迟加载组件？我对 Angular 还很陌生，所以我正试图围绕这些事情展开思考。
@henry，Module 本质上是组件、指令、管道等的容器。所以延迟加载模块最终会延迟加载已注册的组件（添加到 declarations 的数组中） @NgModule) 在模块上。
我增强了我的答案以更详细地解释。