角度延迟加载：loadChildren 不同的行为答案

【问题标题】：Angular Lazy loading: loadChildren different behaviours角度延迟加载：loadChildren 不同的行为
【发布时间】：2020-12-03 17:40:50
【问题描述】：

伙计们，我有一个启用延迟加载的 Angular 应用程序，并且在模块下方。

CoreModule，（在应用模块中导入）
SharedModule，（在每个模块中导入）
项目模块，
授权模块

这是我的应用路由模块：

    { path: "",             redirectTo: "auth/sign-in", pathMatch: "full" },
// { path: "auth",      loadChildren: () => AuthModule }, // Bundled in main js file
{ path: "auth",         loadChildren: () => import("@core/auth/auth.module").then(p => p.AuthModule) },
{ path: "projects",     loadChildren: () => import("@projects/projects.module").then(p => p.ProjectsModule) }

在根应用程序路由模块中使用 动态导入 语法时，在浏览器中获取的 javascript 包如下：（刷新 /auth/sign-in）

core-auth-auth-module.js
default~core-auth-auth-module~projects-projects-module.js
projects-projects-module.js（预加载）

1- 那么模块 1 和模块 2 到底是什么？

然后，当我在 loadchildren 上使用函数语法时，前 2 个模块不会在浏览器中加载。

2- 有什么区别？

【问题讨论】：

标签： angular lazy-loading angular-routing angular-lazyloading

【解决方案1】：

不同之处在于，如果使用 import 关键字，您的模块会延迟加载，而 loadChildren: () => AuthModule 语法会将 AuthModule 捆绑在主 js 文件中。

- 那么模块 1 和 2 到底是什么？

您告诉 Angular(webpack) 使用 import 关键字延迟加载 AuthModule。 Webpack 注意到了这条指令，并根据模块路径创建了专用的惰性块：

import("@core/auth/auth.module")
               ||
               \/
      core-auth-auth-module.js chunk

所以，第一个块是您的 AuthModule 所在的位置。

但是 Angular CLI 在后台使用 webpack，它在 SplitChunksPlugin^ref 的帮助下在幕后发挥了一些作用。

这个 webpack 插件会尽量减少代码中的重复并从惰性模块中提取额外的包。

default~core-auth-auth-module~projects-projects-module.js
                ||                        ||
                \/                        \/
            AuthModule                   ProjectsModule

此块包含AuthModule 和ProjectsModule 之间共享的公共代码。

您也可以在我的文章中深入挖掘：

Code-splitting in Angular or how to share components between lazy modules

【讨论】：