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";

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)
    );

You can checkout the result images attached.

Comments

[tuna]

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

[Samir Ajdini]

This is causing hydration error on my project.