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

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

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

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() 에 넣습니다(주식 차트).
• 언어: 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 코드가 전혀 없는 입구를 쓰세요. 차트 종류는 모두 등록되어 있습니다.

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

입구 목록

자주 묻는 질문

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

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

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

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

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

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