preact-x supports Lazy component, which can be used as shown here.
Prefer using the Lazy component along with Suspense instead of this package.
This package is still useful for preact versions < 10
Async route component for preact-router
npm i -D preact-async-route
preact-async-route provides <AsyncRoute> tag to load your components lazily.
<AsyncRoute> provides similar props to return a lazily loaded component either as a Promise resolving to the component or return the component in a callback.
<AsyncRoute> also has a loading props, to which you can pass a component to be shown while the component is being lazily loaded.
Version 2.0 brings support for a new prop component
in order to make usage of already imported components now preact-async-route will support 2 props
componentthis will just take the JSX component itself and NOT the function- for function calls
getComponentis the prop
check README 👇
import { h, render } from 'preact';
import Router, from 'preact-router';
import AsyncRoute from 'preact-async-route';
import Home from './Components/Home/Home.jsx';
import Terms from './Components/Terms/Terms.jsx';
import Loading from './Components/Loading/Loading.jsx';
/** @jsx h */
/**
arguments passed to getComponent:
url -- matched url
cb -- in case you are not returning a promise
props -- props that component will recive upon being loaded
*/
function getProfile(url, cb, props){
return import('../component/Profile/Profile.jsx').then(module => module.default);
}
const Main = () => (
<Router>
<Home path="/" />
<Terms path="/terms" />
<AsyncRoute path="/profile/:userid" component={Home} />
<AsyncRoute path="/friends/:userid" getComponent={getProfile}
loading={()=>{return <Loading/>}} />
</Router>
);