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

问题描述

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

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
• default〜core-auth-auth-module〜projects-projects-module.js
• projects-projects-module.js（预加载）

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

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

2-有什么区别？

解决方法

区别在于，如果使用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