From 69f55de26319e570ce0a8c4dbe8a29cb0d0b51c5 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 18 Feb 2023 22:03:55 +0700 Subject: optimization --- src/core/components/elements/Image/Image.jsx | 3 ++- src/lib/product/components/Product.jsx | 2 +- src/lib/product/components/ProductCard.jsx | 2 +- src/pages/index.jsx | 26 +++++++++++++++++++++----- src/pages/shop/brands/[slug].jsx | 8 +++++--- src/pages/shop/cart.jsx | 6 ++++-- src/pages/shop/product/[slug].jsx | 6 ++++-- src/pages/shop/search.jsx | 6 ++++-- 8 files changed, 42 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx index be2866e7..579660a4 100644 --- a/src/core/components/elements/Image/Image.jsx +++ b/src/core/components/elements/Image/Image.jsx @@ -4,9 +4,10 @@ import "react-lazy-load-image-component/src/effects/opacity.css" const Image = ({ ...props }) => ( ) diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product.jsx index 2a3624e7..299cdc77 100644 --- a/src/lib/product/components/Product.jsx +++ b/src/lib/product/components/Product.jsx @@ -87,7 +87,7 @@ const Product = ({ product }) => { {product.name}
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 86ac3a64..9eb00ae0 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -14,7 +14,7 @@ const ProductCard = ({ product, simpleTitle }) => { {product?.name} { product.variantTotal > 1 && (
{ product.variantTotal } Varian
diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 05c6520a..6503ac20 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,9 +1,25 @@ +import dynamic from "next/dynamic" import Seo from "@/core/components/Seo" -import BasicLayout from "@/core/components/layouts/BasicLayout" -import CategoryHomeId from "@/lib/home/components/CategoryHomeId" -import HeroBanner from "@/lib/home/components/HeroBanner" -import PopularProduct from "@/lib/home/components/PopularProduct" -import PreferredBrand from "@/lib/home/components/PreferredBrand" +import ImageSkeleton from "@/core/components/elements/Skeleton/ImageSkeleton" +import PopularProductSkeleton from "@/lib/home/components/Skeleton/PopularProductSkeleton" + +const BasicLayout = dynamic(() => import("@/core/components/layouts/BasicLayout")) + +const HeroBanner = dynamic(() => import("@/lib/home/components/HeroBanner"), { + loading: +}) + +const PreferredBrand = dynamic(() => import("@/lib/home/components/PreferredBrand"), { + loading: +}) + +const PopularProduct = dynamic(() => import("@/lib/home/components/PopularProduct"), { + loading: +}) + +const CategoryHomeId = dynamic(() => import("@/lib/home/components/CategoryHomeId"), { + loading: +}) export default function Home() { return ( diff --git a/src/pages/shop/brands/[slug].jsx b/src/pages/shop/brands/[slug].jsx index 4965d4f7..da3ee84d 100644 --- a/src/pages/shop/brands/[slug].jsx +++ b/src/pages/shop/brands/[slug].jsx @@ -1,9 +1,11 @@ -import BasicLayout from "@/core/components/layouts/BasicLayout" +import dynamic from "next/dynamic" import { getIdFromSlug, getNameFromSlug } from "@/core/utils/slug" -import ProductSearch from "@/lib/product/components/ProductSearch" import { useRouter } from "next/router" import _ from "lodash" -import Brand from "@/lib/brand/components/Brand" + +const BasicLayout = dynamic(() => import("@/core/components/layouts/BasicLayout")) +const ProductSearch = dynamic(() => import("@/lib/product/components/ProductSearch")) +const Brand = dynamic(() => import("@/lib/brand/components/Brand")) export default function BrandDetail() { const router = useRouter() diff --git a/src/pages/shop/cart.jsx b/src/pages/shop/cart.jsx index 20279e0c..735ea19f 100644 --- a/src/pages/shop/cart.jsx +++ b/src/pages/shop/cart.jsx @@ -1,5 +1,7 @@ -import AppLayout from "@/core/components/layouts/AppLayout" -import CartComponent from "@/lib/cart/components/Cart" +import dynamic from "next/dynamic" + +const AppLayout = dynamic(() => import("@/core/components/layouts/AppLayout")) +const CartComponent = dynamic(() => import("@/lib/cart/components/Cart")) export default function Cart() { return ( diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx index 84a3c7d4..2f610afb 100644 --- a/src/pages/shop/product/[slug].jsx +++ b/src/pages/shop/product/[slug].jsx @@ -1,8 +1,10 @@ import Seo from "@/core/components/Seo" -import BasicLayout from "@/core/components/layouts/BasicLayout" import { getIdFromSlug } from "@/core/utils/slug" import productApi from "@/lib/product/api/productApi" -import Product from "@/lib/product/components/Product" +import dynamic from "next/dynamic" + +const BasicLayout = dynamic(() => import("@/core/components/layouts/BasicLayout")) +const Product = dynamic(() => import("@/lib/product/components/Product")) export async function getServerSideProps(context) { const { slug } = context.query diff --git a/src/pages/shop/search.jsx b/src/pages/shop/search.jsx index e86b1f4e..a41c3b5f 100644 --- a/src/pages/shop/search.jsx +++ b/src/pages/shop/search.jsx @@ -1,8 +1,10 @@ -import BasicLayout from "@/core/components/layouts/BasicLayout" -import ProductSearch from "@/lib/product/components/ProductSearch" +import dynamic from "next/dynamic" import { useRouter } from "next/router" import _ from "lodash-contrib" +const BasicLayout = dynamic(() => import("@/core/components/layouts/BasicLayout")) +const ProductSearch = dynamic(() => import("@/lib/product/components/ProductSearch")) + export default function Search() { const router = useRouter() -- cgit v1.2.3