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

Question

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

Answer 1

默认情况下，除非另有说明，否则A​​ngular将使用紧急加载。

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

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

2. 惰性加载的模块还应该在其中实现路由模块，并且在其中应调用forChild而不是forRoot。

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

这里是一个Sample StackBlitz，可用来实现延迟加载。

Answer 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文件中引用的脚本分开。

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