LWC Dynamic Import

Introduction

Before Winter 24, Lightning Web Components framework did not allow us to make dynamic imports. In 2023 it’s finally possible. Dynamic import in LWC is a convenient solution to make a component more customizable. It’s not the silver bullet, but it may help in some situations.

Configuration

Let’s create an empty component, I called it dynamicImport A component’s configuration file must include the lightning__dynamicComponent capability. dynamicImport.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <capabilities>
        <capability>lightning__dynamicComponent</capability>
    </capabilities>
</LightningComponentBundle>

apiVersion must be greater then 55.0

Set Dynamic Component Syntax

To instantiate a component dynamically, you should utilize the <lwc:component> managed element in a component’s HTML file, utilizing the lwc:is directive. Here is example of dynamicImport.html:

<template>
    <div class="container">
        <lwc:component lwc:is={componentConstructor}></lwc:component>
    </div>
</template>

Now it’s time to actually use dynamic import in LWC, example of dynamicImport.js:

import { LightningElement } from "lwc";
export default class App extends LightningElement {
  componentConstructor;
  async connectedCallback() {
    const { default: ctor } = await import("c/myComponent");
    this.componentConstructor = ctor;
  }
}

Select a Dynamic Component

A custom element must be attached to the DOM before you can select it. To select a dynamic component, use the lwc:ref directive or use an attribute that’s assigned to the component, such as a class name.

<template>
    <lwc:component lwc:is={componentConstructor}
                   lwc:ref="myCmp">
    </lwc:component>
</template>

To access referenced component you can use this.refs.myCmp, it will contain a reference to the DOM node.

To identify if a dynamic component is attached to the DOM:

• Use connectedCallback in the dynamic component to signal when it’s attached to the DOM.
• Use renderedCallback on the parent component to detect when the dynamic component has rendered to the DOM.

Dynamic Components in Packages

You can use dynamic components in managed packages only. Dynamic components in unlocked packages aren’t supported.

Some considerations about Ligtning Web Component dynamic import

In conclusion, dynamic importing in Lightning Web Components (LWC) introduces a convenient way to enhance component customization. However, it should not be regarded as a one-size-fits-all solution, as it carries potential drawbacks, particularly in terms of runtime performance overhead.

One key consideration is that when you statically import code from a specific file, that file is always loaded, regardless of whether it is used. This can be problematic for performance, especially if the imported file is large, leading to longer loading times.

On the other hand, when you dynamically import a component, the framework may need to perform a network roundtrip to fetch the content if it is not already stored in the browser’s HTTP cache.

Therefore, while dynamic importing can be a valuable tool for enhancing flexibility in LWC development, developers should carefully weigh its benefits against its potential impact on performance and loading times. It’s essential to make informed decisions based on the specific requirements and constraints of the project at hand.