# 필요한 차트만 불러오기: 82chart 번들 크기 줄이기 (lite, charts, features)

> @82chart/core/lite 와 use() 로 막대·선 차트만 넣으면 gzip 37KB 안팎. 서버 렌더 전용 @82chart/core/server 도 있습니다. 크기 표와 예제.

Source: https://82chart.com/docs/modular-imports/

필요한 차트만 불러오기(모듈식 import)란 페이지가 쓰는 차트 종류와 기능만 번들에 넣어 자바스크립트 크기를 줄이는 방법입니다. 82chart 0.5 에서는 `@82chart/core/lite` 에서 시작해 `use()` 로 쓰는 것만 등록합니다. 막대·선 차트만 쓰는 페이지는 gzip 약 36.8 KB 로, 전체(55.1 KB)보다 3분의 1쯤 작습니다.

`import { createChart } from '@82chart/core'` 는 지금처럼 모든 것을 담습니다(차트 14종, 실시간, 확대, 내보내기 메뉴, 패턴, 4개 언어). 기존 코드는 바꿀 것이 없습니다.

```js
import { createChart, use } from '@82chart/core/lite';
import { bar, line } from '@82chart/core/charts';      // 또는 '@82chart/core/charts/bar'
import { zoom, exporting } from '@82chart/core/features';
use(bar, line, zoom, exporting);

createChart('#sales', { type: 'bar', data, zoom: true });
```

- 차트 종류(`@82chart/core/charts`): `line, area, bar, scatter, pyramid, waterfall, pie, donut, radar, gauge, heatmap, calendar, treemap, funnel`, 전부는 `allCharts`. 막대 위에 선 시리즈를 겹친 차트는 `type` 하나(예: `bar`)만 등록하면 됩니다.
- 기능(`@82chart/core/features`): `realtime`(append·트윈·실시간 패치), `zoom`(드래그·핀치·휠·확대 단추), `exporting`(오른쪽 위 메뉴, PNG, 엑셀), `patterns`(무늬 채우기). 전부는 `allFeatures`.
- 주식 차트: `import { candlestick, ohlc } from '@82chart/stock'` 를 같은 `use()` 에 넣습니다([주식 차트](https://82chart.com/docs/stock/)).
- 언어: lite 에는 한국어·영어만 들어 있습니다. 일본어·중국어는 `import { ja } from '@82chart/core/locales/ja'; registerLocale('ja', ja)`.
- 등록하지 않은 종류를 그리면 차트 자리에 `pie: use(pie)` 가 보이고 콘솔에 한 번 알려 줍니다. 등록하지 않은 기능은 조용히 꺼집니다(확대 단추·메뉴가 나오지 않음). `toPNG()`·`toXLSX()` 는 `exporting` 이 없으면 오류를 냅니다. CSV·SVG(`toCSV`, `toSVG`)는 항상 됩니다.
- 툴팁·키보드·범례·스크린리더용 표는 lite 에도 늘 들어 있습니다. 접근성은 빼지 않습니다.

## 서버에서: @82chart/core/server

Node, Cloudflare Workers, Deno, Bun 에서는 DOM 코드가 전혀 없는 입구를 쓰세요. 차트 종류는 모두 등록되어 있습니다.

```js
import { renderToSVG, renderToXLSX } from '@82chart/core/server';

const svg = renderToSVG(options, { width: 800 });
const xlsx = await renderToXLSX(options); // Uint8Array (엑셀 파일)
```

## 크기 표

esbuild 로 줄이고(minify) gzip -9 로 잰 값입니다.

| 무엇을 넣었나 | 0.4.1 | 0.5.0 |
| --- | --- | --- |
| `82chart.min.js` (CDN, 전부) | 51.2 KB | 59.3 KB |
| `@82chart/core` 전부 (ESM, 번들러) | 47.9 KB | 55.1 KB |
| lite + bar + line | – | 36.8 KB |
| lite + bar + line + zoom + exporting | – | 42.5 KB |
| lite + line + realtime | – | 39.9 KB |
| lite + pie + donut | – | 38.8 KB |
| `@82chart/core/server` (renderToSVG) | 31.4 KB* | 34.4 KB |
| lite + `@82chart/stock` 캔들 | – | 30.7 KB |
| `82chart-stock.min.js` (CDN 추가 파일) | – | 5.9 KB |

* 0.4.1 에는 서버 입구가 없어 `@82chart/core` 에서 `renderToSVG` 만 가져와 번들러가 덜어 낸 크기입니다. 0.5 서버 입구가 조금 큰 것은 추세선·비교·표 데이터 코드가 늘었기 때문이고, 대신 DOM 코드가 없음을 보장합니다. 전체 파일이 커진 주된 이유는 xlsx 작성기(약 2.5 KB)와 추세선·비교(약 1 KB)입니다.

## 입구 목록

| 이름 | 설명 |
| --- | --- |
| `@82chart/core` | 전부 등록된 기본 입구 (지금까지와 같음) |
| `@82chart/core/lite` | 아무것도 등록되지 않은 작은 입구: `createChart`, `renderToSVG`, `renderToXLSX`, `use`, 포맷 함수 |
| `use(...modules)` | 차트 종류와 기능 등록. 배열도 받음. 같은 것을 두 번 등록해도 괜찮음 |
| `@82chart/core/charts` | `line` … `funnel`, `allCharts` (`@82chart/core/charts/bar` 처럼 하나씩도) |
| `@82chart/core/features` | `realtime`, `zoom`, `exporting`, `patterns`, `allFeatures` |
| `@82chart/core/server` | `renderToSVG`, `renderToXLSX`, 포맷 함수 (DOM 없음) |
| `@82chart/core/kit` | 차트 모듈을 만들 때 쓰는 SVG·눈금·숫자 도우미 (1.0 전에는 바뀔 수 있음) |

> CDN 파일(`82chart.min.js`, `82chart.esm.js`)은 그대로 전부를 담습니다. 스크립트 태그용 lite 파일은 만들지 않았습니다(차트 종류 파일이 같은 등록부를 나눠 쓰려면 전역 변수가 필요해 깔끔하지 않음). 작은 번들이 필요하면 npm 과 번들러를 쓰세요.

## 자주 묻는 질문

### 기존 코드를 바꿔야 하나요?

아니요. `@82chart/core` 는 그대로 모든 차트와 기능을 등록합니다. 번들을 줄이고 싶은 페이지만 `@82chart/core/lite` 로 바꾸면 됩니다.

### lite 에서도 툴팁·키보드·범례·표가 되나요?

네. 툴팁, 키보드 탐색, 범례, 스크린리더용 요약과 표는 늘 들어 있습니다. 빠지는 것은 등록하지 않은 차트 종류와 실시간·확대·내보내기 메뉴·무늬 같은 기능뿐입니다.

### CDN 에서도 작게 쓸 수 있나요?

0.5 는 CDN 에 전체 파일만 있습니다(gzip 약 59 KB). 작은 번들은 npm 과 번들러(Vite, webpack, esbuild 등)로 만드세요.