在生产应用中，优化包大小对于性能至关重要。Chakra UI 提供了多种策略，通过仅导入您所需的组件和样式来帮助您减小包大小。

重点关注领域

Chakra UI 应用中存在两种导致包大小过大的主要来源：

• 打包器摇树优化错误：这是指底层打包器无法从包中移除未使用的代码。

• 大型主题对象：Chakra UI 中每个组件的“配方”（recipes）默认都会被导入，这可能导致包大小过大。

通过仅导入您所需的组件和“配方”，您可以显著减小应用的包大小。

模块化组件导入

您无需从主包导入所有 Chakra UI 组件，而是可以仅导入您所需的特定组件。这种方法确保了未使用的组件不会被包含在最终的包中。

之前（从主包导入）

// ❌ This imports the entire Chakra UI library
import { Button, Input, Modal } from "@chakra-ui/react"

之后（模块化导入）

// ✅ Import only the components you need
import { Button } from "@chakra-ui/react/button"
import { Input } from "@chakra-ui/react/input"
import { Modal } from "@chakra-ui/react/modal"

模块化“配方”导入

您无需通过 defaultSystem 使用 Chakra UI 中的默认主题，而是可以考虑创建自己的主题切片，仅导入您所需的“配方”。这可以显著减少应用中的 JS 有效载荷。

之前（所有“配方”都被导入）

// ❌ This imports all recipes and their variants
import { defaultSystem } from "@chakra-ui/react"

之后（模块化“配方”导入）

// ✅ Import only the recipes you need
import { createSystem, defaultBaseConfig } from "@chakra-ui/react"
import { buttonRecipe, inputRecipe } from "@chakra-ui/react/theme"

const system = createSystem(defaultBaseConfig, {
  theme: {
    recipes: {
      button: buttonRecipe,
      input: inputRecipe,
    },
  },
})

另外，您也可以考虑使用 CLI 分离主题。这使您可以完全控制主题的令牌（tokens）和“配方”。

动态组件导入

如果您发现某个组件并非立即需要（例如模态框或复杂表单），可以考虑动态导入。

import { Suspense, lazy } from "react"

const Modal = lazy(() =>
  import("@chakra-ui/react/modal").then((mod) => ({
    default: mod.Modal,
  })),
)

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Modal.Root>...</Modal.Root>
    </Suspense>
  )
}

总结

进行这些优化时，请务必衡量其影响，而不是盲目应用。

1. 优化前：运行 npm run build 并记录包大小。
2. 应用优化：实现模块化导入。
3. 优化后：再次运行 npm run build 并进行比较。

通过同时实现模块化组件导入和模块化“配方”导入，您可以在保持 Chakra UI 设计系统所有优势的同时，显著提升应用的性能。