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.
- Just import it like documented on the documentation guide. import { ChakraProvider } from "@chakra-ui/react";
- Importing it from import { ChakraProvider } from "@chakra-ui/provider"; instead of /react
- 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.
Top comments (2)
i use antd is there any way to reduce the size like this chakra? Thanks
This is causing hydration error on my project.