Angular 角度惰性加载：加载不同行为的子对象

伙计们，我有一个角度应用程序，启用了延迟加载，并且在模块下面

CoreModule，（在应用程序模块中导入）
SharedModule（在每个模块中导入）
项目模块，
AuthModule

这是我的应用程序路由模块：

    { 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
• 默认~core auth auth module~projects-projects-module.js
• projects-projects-module.js（预加载）

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

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

---

2-有什么区别？

区别在于，如果使用

import

关键字，您的模块将被延迟加载，而

loadChildren:（）=>AuthModule

语法将在主js文件中绑定AuthModule

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

您告诉Angular（webpack）使用

import

关键字延迟加载AuthModule。Webpack注意到此指令，并根据模块路径创建了一个名称为的专用惰性块：

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

因此，第一个块是您的

AuthModule

所在的位置

但是Angular CLI在引擎盖下使用webpack，在SplitChunksPlugin的帮助下，它在幕后发挥了一些魔力

这个webpack插件试图最小化代码中的重复，并从惰性模块中提取额外的包

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

此区块包含

AuthModule

和

ProjectsModule

之间共享的公共代码

您还可以在我的文章中深入了解详细信息：