3.4 KiB
3.4 KiB
Riot Lazy
Lazy wrapper for Riot.js components
Table of Contents
Install
npm i -S @riotjs/lazy
Documentation
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>
When the component is loaded, Lazy will dispatch a 'load' event from the component root element.
This can be useful e.g. for removing splashscreen on app start:
<app>
<user name={state.name} onload={ removeSplashscreen }/>
<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'))
},
removeSplashscreen() {
// the splashscreen, in this example, is create in pure html
// in the main page, to avoid blank page loading
const splashscreen = document.querySelector("#splashscreen");
if (!splashscreen) {
return;
}
splashcreen.parentElement.removeChild(splashscreen);
}
}
</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>