Salesforce Fact #937 — Dynamic import of LWC

Posted by Vinay Vernekar 2nd November 2025

Dynamic import for Lightning Web Components (LWC) — what it is, requirements, and when to use it to balance modularity and performance.

With Winter ’24 Salesforce added support for dynamically importing LWC modules. This lets developers load components on demand rather than bundling everything up front — useful for large apps, conditional UI flows, or feature flags.

Requirements

Before using dynamic import, make sure your org meets these prerequisites:

  • API version of the LWC must be 55.0 or higher.
  • Lightning Web Security must be enabled in Session Settings.
  • The component metadata XML should declare the lightning__dynamicComponent capability.

How dynamic import works (quick example)

Use a dynamic import statement in your JavaScript to load another LWC module at runtime and then create an instance with createElement:

// containerComponent.js
import { LightningElement } from 'lwc';
import { createElement } from 'lwc';

export default class ContainerComponent extends LightningElement {
  async loadChild() {
    // dynamically import the module only when needed
    const module = await import('c/myDynamicComponent');
    const Child = module.default;
    const childEl = createElement('c-my-dynamic-component', { is: Child });
    childEl.someProp = 'value';
    this.template.querySelector('.placeholder').appendChild(childEl);
  }
}

Example metadata (component .js-meta.xml)



  55.0
  true
  
    lightning__RecordPage
  
  
    lightning__dynamicComponent

When to use it

  • Load rarely used features or heavy components (e.g., charts, rich editors) only when users open them.
  • Support progressive enhancement and reduce initial bundle size for faster first paint.
  • Implement feature flags or A/B testing without shipping multiple versions.

Best practices & performance notes

  • Measure before and after — dynamic import saves initial load but adds a network cost when the module is first requested.
  • Use it selectively for components that significantly increase bundle size.
  • Provide a loading placeholder and graceful fallback for slow networks.
  • Keep API compatibility in mind: avoid breaking changes in dynamically loaded modules.

Reference: Salesforce docs on dynamic components — https://developer.salesforce.com/docs/platform/lwc/guide/js-dynamic-components.html

Why this matters: Dynamic import helps Salesforce developers build more modular, performant LWC apps by deferring heavy payloads until needed. For admins and product owners, this can mean faster page loads and better user experience without major platform changes.