WC Toolkit Lazy Loader

Create a single entry point to lazy-load your custom elements/web components as needed!

As components get loaded the component configurations get removed from the list and when all of the components have been loaded, the loader will shut off to help improve performance.

<body>
  <my-button>Button</my-button>
  <my-checkbox></my-checkbox>

  <!-- the lazy-loader will only load what gets used -->
  <script type="module" src="path/to/my/loader.js" />
</body>

Usage

This package includes two ways to generate the custom data config file:

calling a function in your build pipeline
as a plugin for the Custom Element Manifest Analyzer

Install

npm i -D @wc-toolkit/lazy-loader

Build Pipeline

import { generateLazyLoader, type LazyLoaderOptions } from "@wc-toolkit/lazy-loader";
import manifest from "./path/to/custom-elements.json" with { type: 'json' };

const options: LazyLoaderOptions = {...};

generateLazyLoader(manifest, options);

CEM Analyzer

Set-up

Ensure the following steps have been taken in your component library prior to using this plugin:

Install and set up the Custom Elements Manifest Analyzer
Create a config file

Import

// custom-elements-manifest.config.js

import { lazyLoaderPlugin } from "@wc-toolkit/lazy-loader";

const options = {...};

export default {
  plugins: [
    lazyLoaderPlugin(options)
  ],
};

Once you run the analyzer, you should see a new file (loader.js by default) that users can import to load your components!

<script type="module" src="https://my-cdn.com/loader.js"></script>;

// or

import "my-project/loader.js";

Be sure to check out the official docs for more information on how to use this.