# 入口

> chroma-panel 的全部入口及各自增加的打包体积。只导入 React 颜色选择器外壳和用到的模式，体积可从 23.1 kB 降到 15.0 kB。

Source: https://chroma-panel.jscrate.dev/zh/react/utils/entry-points
Last updated: 2026-09-21

`chroma-panel` 拆分成了多个入口，你可以只导入用到的部分。下表列出了每个路径包含的内容。在意打包体积，或者想脱离 React 使用[颜色引擎](https://chroma-panel.jscrate.dev/zh/react/utils/color-engine)时，就用更小的路径。单靠 tree shaking 并不能去掉你没有展示的模式：每个模式会在文件加载时自行注册，而且包把这些文件标记为有副作用，所以打包工具会保留它们。体积的节省来自少导入几个入口。

导入 `chroma-panel` 会注册全部五种模式。想减小体积，就导入外壳，再自行添加模式。

```tsx
import { ChromaPanel } from "chroma-panel/panel";
import { wheelMode } from "chroma-panel/modes";

<ChromaPanel modes={[wheelMode]} />;
```

| 导入内容       | 应用增加的体积 |
| -------------- | -------------- |
| 全部五种模式   | 23.1 kB        |
| 外壳加一种模式 | 15.0 kB        |

两个数值都是 gzip 压缩后的大小，且 React 作为外部依赖不计入。详见[这些体积是如何测量的](https://chroma-panel.jscrate.dev/zh/react/overview/about)。

## 子路径

| 入口                        | 包含内容                              |
| --------------------------- | ------------------------------------- |
| `chroma-panel`              | 全部内容，并注册全部五种模式          |
| `chroma-panel/panel`        | 面板外壳，不含模式                    |
| `chroma-panel/core`         | 颜色引擎，不含 React                  |
| `chroma-panel/color`        | CSS Color 4 解析与转换                |
| `chroma-panel/gradient`     | 渐变编辑器及渐变模型工具              |
| `chroma-panel/modes`        | 可显式导入的内置模式对象              |
| `chroma-panel/export`       | 导出为 CSS、SCSS、Tailwind 和设计令牌 |
| `chroma-panel/wheel`        | 色轮模式                              |
| `chroma-panel/sliders`      | 滑块模式                              |
| `chroma-panel/palettes`     | 调色板模式                            |
| `chroma-panel/image`        | 图片模式                              |
| `chroma-panel/pencils`      | 预设色模式                            |
| `chroma-panel/named-colors` | 148 个 CSS 颜色名称                   |
| `chroma-panel/contrast`     | APCA 和 WCAG 辅助函数                 |
| `chroma-panel/image-worker` | 在主线程之外采样用的 worker           |
| `chroma-panel/style.css`    | 样式表                                |

> **推荐使用显式的模式对象**
>
> 从 `chroma-panel/modes` 导入模式对象，再传给 `modes`。v0
> 中依靠副作用的写法（如 `import "chroma-panel/wheel"`）仍然受支持。