Lazy wrapper for Riot.js components
npm i -S @riotjs/lazy
The following examples show how you can lazy load Riot.js components using modern javascript bundlers like Webpack or Rollup.
You can lazy load any component providing a fallback component during the loading process for example:
<app>
<user name={state.name}/>
<sidebar/>
<script>
import lazy from '@riotjs/lazy'
import Loader from './my-loader.riot'
export default {
components: {
// use a fallback loader
user: lazy(Loader, () => import('./user.riot'))
// just lazy load the sidebar
sidebar: lazy(() => import('./sidebar.riot'))
}
}
</script>
</app>
Lazy loading Riot.js components is recommended combined with @riotjs/route
<app>
<router>
<route path="/user/:name">
<!-- this component will be loaded only when the route will be matched -->
<user name={route[0]}/>
</route>
</router>
<script>
import lazy from '@riotjs/lazy'
import Loader from './my-loader.riot'
export default {
components: {
user: lazy(Loader, () => import('./user.riot'))
}
}
</script>
</app>