1. 僅執行元件延遲(Component lazy load)載入是不是不起作用？進行這項工作是否需要任何設定？ 考慮到我們在整個網站上使用的共享元件，我們想採用這種方法(即元件延遲載入)。這樣，我們可以只測試每個元件。

回答：元件延遲載入有效，但是在更復雜的元件（使用不同的指令和元件）的情況下更加困難，因為動態匯入僅針對元件類 Component class，而不是 Angular 模組。如果這些元件類中使用到的指令和其他元件並沒有被載入，則執行時會報各種錯誤。

這些複雜情況的一種解決方法是將模組(module definition)定義嵌入到與元件本身相同的檔案，即在 Component 實現檔案裡，再定義一遍模組。因此模組將與元件一起載入。

2. 如果我們繼續選擇模組延遲載入，我們如何從插槽延遲載入沒有與 CMS 元件對映的 Angular 元件？

回答：它目前在 Angular 框架中不是開箱即用的。 預設情況下，Angular 支援路由延遲載入，對於像 Spartacus 這樣的 CMS 驅動的站點，我們不能使用基於路由的方式來延遲載入一個 Angular 元件，因為我們在構建時不知道指定路由需要哪些元件。

這就是 Spartacus 利用 CMS 對映作為支援延遲載入的機制的原因。 簡而言之，我們可以得到一個提示（在導航到它時）指定頁面需要哪些元件，然後使用 CMS 對映配置，延遲載入所需的元件或功能。

3. 模組內的靜態匯入是否會影響元件/模組延遲載入？ 例如：我們在 HomePage 模組中匯入了 iconModule 並且當前主頁模組正在 app.module 中延遲載入。 在這種情況下，元件延遲載入不起作用。 模組延遲載入僅適用於 home 模組

回答：如果您動態（惰性）和靜態地匯入一個入口點，那麼構建器（webpack）將使其靜態捆綁。 這是一個常見的情況，為什麼延遲載入可能不起作用，在某種程度上，應用程式應該仍然可以工作，如果配置正確，程式碼拆分機制將不會對這段程式碼起作用，並且不會生成單獨的 JS 塊。

但是，靜態匯入可以在單獨的延遲載入模組之間共享。如果這些匯入僅在延遲載入的模組之間共享，則將建立特殊的共享塊，它將載入兩個功能。 如果匯入也與直接在主塊（app.module）中匯入的某些元件或模組共享，那麼程式碼將被靜態捆綁到主塊中。

4. 為了測試目的，我們嘗試了元件和模組延遲載入。 它們都不能完全工作。 即使在新增了 provideDefaultConfig(b2cLayoutConfig) 之後，儘管新增了這個，UI 仍然會在奇怪的地方中斷。

回答：很難從這個描述中猜測潛在的問題。 一般來說，如果延遲載入不起作用，最好的辦法是一步一步地做，從很少的元件開始，並識別潛在的問題。 即便如此，仍然會有部分程式碼需要立即載入，例如應用程式初始化程式、http 攔截器等。

從 Spartacus 3.0 開始，我們開始釋出帶有預設延遲載入功能的整個庫。所有新功能都是以這種方式建立的 + 我們正在繼續移動現有功能，同時改進機制和技術（但仍然是相同的機制）。

一些關於 SAP Spartacus 元件和模組延遲載入的問題和解答

相關文章