Frontend Lazy
Updated over a week ago


The Frontend Lazy package allow components and/or modules to be load dynamically. This is useful if some parts of your application don't need to be loaded until certain condition is met, avoiding extra page load time.


frontend-lazy is already pre-installed on every Shogun Frontend store. To import:

import lazy from 'frontend-lazy'


In the example below, the CartPageEmpty component will be imported only when the condition where the cart is empty is met.

import React from 'react'
import lazy from 'frontend-lazy'
import PageWidth from 'Components/PageWidth'
import CartPageItem from 'Components/CartPageItem'
import CartPageFooter from 'Components/CartPageFooter'
import { useCart } from 'frontend-checkout'
import './styles.css'

// import CartPageEmpty from 'Components/CartPageEmpty'
const CartPageEmpty = lazy(() => import('Components/CartPageEmpty'))

const CartPage = () => {
const [{ items }] = useCart()

return (
<PageWidth className="CartPage">
<h1 className="CartPage-title">Cart</h1>
{items.length > 0 ? (
<div className="CartPage-header">
<div className="CartPage-header-detail" />
<div className="CartPage-header-quantity">Quantity</div>
<div className="CartPage-header-total">Total</div>
<div className="CartPage-items">
{, i) => (
<CartPageItem key={1} item={item} animationOrderNumber={i + 1} />
<CartPageFooter />
) : (
<CartPageEmpty />
export default CartPage
Did this answer your question?