Example 5 — Menu Module (Dynamic Loading)

In contrast to standard loading, 4X includes the ability to automatically load modules, including all shared module dependencies without requiring any additional script tags.

The value of importing modules dynamically is that there is no need to hardcode script tags within each webpage. Instead, the requisit modules are loaded dynamically as-needed, which is faster and more responsive when running complex web apps.

Dynamic modularization also includes:

• On-demand imports, even within if/else statements.
• Internal caching for shared modules, increasing speed.
• Automatic queuing for sequential imports, ensuring correct load order.
• Shared props between modules within the same import scope, allowing variables to be passed between external modules.
• Optional deferment, ensuring that callbacks execute after the page finishes loading.