Angular 6/7 默认使用 Eager/Lazy 加载？

Angular 6/7 by default uses Eager/Lazy loading?

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

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

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

延迟加载涉及将您的应用程序捆绑到额外的包中，这样当 index.html 文件关闭时，它的 所有 都不会被拉下。这会为用户改善您页面的 "first load"。然后其他包被下拉 "on demand"（意味着当用户访问延迟加载路径上的路由时）或在初始加载后在后台异步。

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

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

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

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

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

您可以在这里找到更多信息：https://angular.io/guide/lazy-loading-ngmodules

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

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

  1. 具有 loadChildren 而不是 component 的路由配置对象。分配给它的值将是延迟加载模块的相对路径，后跟 # 后跟模块名称。

  2. 延迟加载模块还应该在其中实现一个路由模块，在那里，它应该调用 forChild 而不是 forRoot。

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

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