头图
  1. Does Component lazy load only do not work? Do you need any settings for this work? Considering the shared components that we use throughout the website, we want to adopt this approach (ie, delayed component loading). In this way, we can only test each component.

Answer: Component lazy loading is effective, but it is more difficult in the case of more complex components (using different instructions and components), because the dynamic import is only for the Component class, not the Angular module. If the instructions and other components used in these component classes are not loaded, various errors will be reported at runtime.

One solution to these complex situations is to embed the module definition in the same file as the component itself, that is, in the Component implementation file, define the module again. So the module will be loaded with the component.

  1. If we continue to choose module lazy loading, how can we lazy load Angular components that are not mapped with CMS components from the slot?

Answer: It is currently not available out of the box in the Angular framework. By default, Angular supports routing delay loading. For CMS-driven sites like Spartacus, we cannot use routing-based methods to delay loading an Angular component because we don't know which components are required to specify the routing.

This is why Spartacus uses CMS mapping as a mechanism to support lazy loading. In short, we can get a prompt (when navigating to it) to specify which components the page needs, and then use the CMS to map the configuration to delay loading the required components or functions.

  1. Will static imports in modules affect the delayed loading of components/modules? For example: we imported iconModule in the HomePage module and the current home page module is being lazily loaded in app.module. In this case, lazy loading of components does not work. Module lazy loading only applies to the home module

Answer: If you import an entry point dynamically (lazy) and statically, then the builder (webpack) will bundle it statically. This is a common situation, why lazy loading may not work, to some extent, the application should still work, if the configuration is correct, the code splitting mechanism will not work on this piece of code, and will not generate Separate JS block.

However, static imports can be shared between separate lazy loaded modules. If these imports are only shared between lazily loaded modules, a special shared block will be created, which will load both functions. If the import is also shared with some components or modules imported directly in the main block (app.module), then the code will be statically bundled into the main block.

  1. For testing purposes, we tried lazy loading of components and modules. None of them can fully work. Even after adding provideDefaultConfig(b2cLayoutConfig), despite adding this, the UI still breaks in strange places.

Answer: It is difficult to guess the underlying problem from this description. Generally speaking, if lazy loading does not work, the best way is to do it step by step, starting with a few components, and identifying potential problems. Even so, there are still some codes that need to be loaded immediately, such as application initializers, http interceptors, etc.

Starting from Spartacus 3.0, we started to release the entire library with default lazy loading. All new features are created in this way + we are continuing to move existing features while improving the mechanism and technology (but still the same mechanism).


注销
1k 声望1.6k 粉丝

invalid