@digital-swing/lazy-module

lazy-module

🚀 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()

💬 Changelog

Please see the CHANGELOG for more information about what has changed recently.

🐛 Testing

npm test

See the full API in the docs.

🌍 Contributing

Please see CONTRIBUTING for details.

🔒 Security

If you discover any security related issues, please email [e-mail] instead of using the issue tracker.

👥 Credits

Lucas Demea

🗒 Roadmap

• Run callback in a service worker