如何解决角延迟加载: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
之间共享的通用代码。
您还可以在我的文章中更深入地了解细节:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。