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

`javascript

import lazyWithPreload from 'lazy-with-preload';

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

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

Example

`javascript
import lazyWithPreload from 'lazy-with-preload';

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

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

// ...

`

or

`javascript
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

/ here is your code /

;
};
``