DEV Community

Zeyad Etman
Zeyad Etman

Posted on

Reduce Bundle size with Chakra UI And NextJS

Reduce Bundle size with Chakra UI

Hi, I was trying to reduce the bundle size of app built with chakra and nextjs. I tried to use three different ways to import the ChakraProvider will share with you the impact of each way on the bundle size from the largest to the best approach.

  1. Just import it like documented on the documentation guide. import { ChakraProvider } from "@chakra-ui/react";

result 1

  1. Importing it from import { ChakraProvider } from "@chakra-ui/provider"; instead of /react


  1. Importing it using next/dynamic
import dynamic from "next/dynamic";
    const ChakraProvider = dynamic(() => import("@chakra-ui/provider").then(
        (mod) => mod.ChakraProvider)
Enter fullscreen mode Exit fullscreen mode

result 3

You can checkout the result images attached.

Top comments (1)

iamtun profile image

i use antd is there any way to reduce the size like this chakra? Thanks