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

Question

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

Answer 1

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

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

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

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

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

这是一个示例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