lazy with preload for ReactJS applications

This Npm package will be useful on any ReactJS applications for avoiding long load modules after switching routes. Especially effectively when you have a big bundle of modules which you need to use on switching between routes and you want to minimise primary chunk.

npm lazy-with-preload
example code github
live example codesandbox

install

yarn add lazy-with-preload

or

npm i --save lazy-with-preload

Ease of use

import lazyWithPreload from 'lazy-with-preload';

const OtherComponent  = lazyWithPreload(() => import('./OtherComponent'));

// somewhere in your component
// ...
OtherComponent.preload();
// ...

Example

import lazyWithPreload from 'lazy-with-preload';

const OtherComponent  = lazyWithPreload(() => import('./OtherComponent'));

// ...
<Link
    to="/other"
    // This component will be needed soon. Let's preload it!
    onMouseOver={() => OtherComponent.preload()}
>
    link OtherComponent
</Link>
// ...

or

import { useEffect } from 'react';

import lazyWithPreload from 'lazy-with-preload';

const OtherComponent1 = lazyWithPreload(() => import('./OtherComponent1'));
const OtherComponent2 = lazyWithPreload(() => import('./OtherComponent2'));
const OtherComponent3 = lazyWithPreload(() => import('./OtherComponent3'));

export const SomeComponent = () => {
  useEffect(() => {
    OtherComponent1.preload();
    OtherComponent2.preload();
    OtherComponent3.preload();
  });
  return <div>
  /* here is your code */
  </div>;
};