头图

一些关于 SAP Spartacus 组件和模块延迟加载的问题和解答

JerryWang_汪子熙
English
  1. 仅执行组件延迟(Component lazy load)加载是不是不起作用?进行这项工作是否需要任何设置? 考虑到我们在整个网站上使用的共享组件,我们想采用这种方法(即组件延迟加载)。这样,我们可以只测试每个组件。

回答:组件延迟加载有效,但是在更复杂的组件(使用不同的指令和组件)的情况下更加困难,因为动态导入仅针对组件类 Component class,而不是 Angular 模块。如果这些组件类中使用到的指令和其他组件并没有被加载,则运行时会报各种错误。

这些复杂情况的一种解决方法是将模块(module definition)定义嵌入到与组件本身相同的文件,即在 Component 实现文件里,再定义一遍模块。因此模块将与组件一起加载。

  1. 如果我们继续选择模块延迟加载,我们如何从插槽延迟加载没有与 CMS 组件映射的 Angular 组件?

回答:它目前在 Angular 框架中不是开箱即用的。 默认情况下,Angular 支持路由延迟加载,对于像 Spartacus 这样的 CMS 驱动的站点,我们不能使用基于路由的方式来延迟加载一个 Angular 组件,因为我们在构建时不知道指定路由需要哪些组件。

这就是 Spartacus 利用 CMS 映射作为支持延迟加载的机制的原因。 简而言之,我们可以得到一个提示(在导航到它时)指定页面需要哪些组件,然后使用 CMS 映射配置,延迟加载所需的组件或功能。

  1. 模块内的静态导入是否会影响组件/模块延迟加载? 例如:我们在 HomePage 模块中导入了 iconModule 并且当前主页模块正在 app.module 中延迟加载。 在这种情况下,组件延迟加载不起作用。 模块延迟加载仅适用于 home 模块

回答:如果您动态(惰性)和静态地导入一个入口点,那么构建器(webpack)将使其静态捆绑。 这是一个常见的情况,为什么延迟加载可能不起作用,在某种程度上,应用程序应该仍然可以工作,如果配置正确,代码拆分机制将不会对这段代码起作用,并且不会生成单独的 JS 块。

但是,静态导入可以在单独的延迟加载模块之间共享。如果这些导入仅在延迟加载的模块之间共享,则将创建特殊的共享块,它将加载两个功能。 如果导入也与直接在主块(app.module)中导入的某些组件或模块共享,那么代码将被静态捆绑到主块中。

  1. 为了测试目的,我们尝试了组件和模块延迟加载。 它们都不能完全工作。 即使在添加了 provideDefaultConfig(b2cLayoutConfig) 之后,尽管添加了这个,UI 仍然会在奇怪的地方中断。

回答:很难从这个描述中猜测潜在的问题。 一般来说,如果延迟加载不起作用,最好的办法是一步一步地做,从很少的组件开始,并识别潜在的问题。 即便如此,仍然会有部分代码需要立即加载,例如应用程序初始化程序、http 拦截器等。

从 Spartacus 3.0 开始,我们开始发布带有默认延迟加载功能的整个库。所有新功能都是以这种方式创建的 + 我们正在继续移动现有功能,同时改进机制和技术(但仍然是相同的机制)。

阅读 500

Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使

Jerry 2007年从电子科技大学计算机专业硕士毕业后进入SAP成都研究院工作至今, SAP社区导师,SAP中国技术...

781 声望
1k 粉丝
0 条评论

Jerry 2007年从电子科技大学计算机专业硕士毕业后进入SAP成都研究院工作至今, SAP社区导师,SAP中国技术...

781 声望
1k 粉丝
文章目录
宣传栏