Frontend Lazy


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 page help you?