@digital-swing/lazy-module NPM

lazy-module

Gzip Coverage Badge

🚀 Reduce initial page load time by asynchronously loading modules, only when they are required. 🚀

📥 Installation

@digital-swing/lazy-module is available as a npm package.

npm

npm install @digital-swing/lazy-module

yarn

yarn add @digital-swing/lazy-module

Then import it as a esm package in your app :

import  { LazyModule } from '@digital-swing/lazy-module';

🛠️ Usage

Simple

const moduleLoader = new moduleLoader({
  trigger: '.trigger',
  loader: 'my-module',
});

moduleLoader.init()

This will load the my-module module when it enters into view.

With custom parameters

const moduleLoader = new moduleLoader({
  trigger: '.swiper-button-next, .swiper-button-prev',
  loader: () => {
    import('swiper/css/navigation');
    return import('swiper' /* webpackChunkName: "swiper" */);
  },
  callback: (ImportedModule, el) => {
    ImportedModule.Swiper.use(ImportedModule.Navigation);
    el.closest('.swiper').swiper.update();
  },
  on: 'scroll',
  dependsOn: [swiper],
  observerOptions:{
    root: document.querySelector('body'),
    rootMargin: '200px',
    thresholds: 0.0,
    }
});

moduleLoader.init()