角度懒惰加载:加载孩子们不同的行为

Question

伙计们，我有一个启用了延迟加载的角度应用程序，它低于模块。

CoreModule，(导入应用程序模块(
SharedModule，(导入每个模块(
ProjectsModule，
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-有什么区别？

Answer 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之间共享的公共代码。

你也可以在我的文章中更深入地了解细节：

• Angular中的代码分割或如何在懒惰模块之间共享组件