From 28a7e81d7a5aa7ffe1656e507ab2413bade4e7e7 Mon Sep 17 00:00:00 2001 From: Richard Willis Date: Tue, 15 Jul 2025 21:24:46 +0100 Subject: [PATCH] Optimise bundling --- README.md | 2 ++ docs/src/pages/docs/bundle-size.mdx | 33 ++++++++++++----------------- docs/src/pages/docs/performance.mdx | 2 ++ example/src/App.tsx | 18 ++++++++++------ src/echart.tsx | 2 ++ src/use-echarts.ts | 4 ++-- src/utils/chart-init.ts | 23 ++------------------ 7 files changed, 34 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 38dfc1f..3093994 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,7 @@ A quick example of how to create a simple chart: ```tsx import { EChart } from '@kbox-labs/react-echarts' +import * as echarts from 'echarts'; function App() { return ( @@ -34,6 +35,7 @@ function App() { height: '600px', width: '100%' }} + init={echarts.init} xAxis={{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] diff --git a/docs/src/pages/docs/bundle-size.mdx b/docs/src/pages/docs/bundle-size.mdx index 507aab9..3650cae 100644 --- a/docs/src/pages/docs/bundle-size.mdx +++ b/docs/src/pages/docs/bundle-size.mdx @@ -2,26 +2,17 @@ import { Callout } from 'nextra/components' # Bundle Size - - By default, and unless the `use` prop is specified all source code of ECharts - is included. - - Controlling bundle size is crucial for optimizing the performance of your -application. **By default, all source code of ECharts is included.** -Nonetheless, you can leverage the tree-shakeable interface offered by ECharts by -using the `use` prop. - -## The `use` prop +application. -In the context of React ECharts, you have the flexibility to include only the -necessary components by utilizing the `use` prop. +## The echarts `use` prop -For a more tailored approach, you can leverage the tree-shakeable interface +You can leverage the tree-shakeable interface offered by ECharts. This allows you to selectively bundle the required components, resulting in a more streamlined and minimal bundle size. ```tsx +import * as echarts from 'echarts/core' import { EChart } from '@kbox-labs/react-echarts' import { BarChart } from 'echarts/charts' import { LabelLayout } from 'echarts/features' @@ -32,16 +23,18 @@ import { GridComponent } from 'echarts/components' +echarts.use([ + BarChart, + TitleComponent, + TooltipComponent, + GridComponent, + CanvasRenderer +]); + function App() { return ( ) diff --git a/docs/src/pages/docs/performance.mdx b/docs/src/pages/docs/performance.mdx index 926306d..c80174e 100644 --- a/docs/src/pages/docs/performance.mdx +++ b/docs/src/pages/docs/performance.mdx @@ -11,9 +11,11 @@ re-renders. ```tsx import { EChart, EChartProps } from '@kbox-labs/react-echarts' +import * as echarts from 'echarts'; import { useMemo } from 'react' const staticProps: EChartProps = { + init: echarts.init, xAxis: { type: 'category' }, diff --git a/example/src/App.tsx b/example/src/App.tsx index e837102..731fbe3 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -8,6 +8,16 @@ import { GridComponent } from 'echarts/components' +import * as echarts from 'echarts/core' + +echarts.use([ + LineChart, + TitleComponent, + TooltipComponent, + GridComponent, + CanvasRenderer +]) + function App() { const [count, setCount] = useState(0) @@ -20,13 +30,7 @@ function App() { = ({ // Initialization options + init, devicePixelRatio, height, locale, @@ -135,6 +136,7 @@ export const EChart: FC = ({ // Use ECharts hook const [ref] = useECharts({ // Initialization options + init, devicePixelRatio, height, locale, diff --git a/src/use-echarts.ts b/src/use-echarts.ts index 5fb225d..5b2fc9c 100644 --- a/src/use-echarts.ts +++ b/src/use-echarts.ts @@ -7,7 +7,7 @@ import { setupEventHandlers } from './utils/event-handlers' // Types import type { EChartEventsProps } from './events' import type { EChartsOption, SetOptionOpts } from 'echarts' -import type { init, ECharts, use as echartsUse } from 'echarts/core' +import type { init, ECharts } from 'echarts/core' export type UseEChartsOptions = EChartEventsProps & SetOptionOpts & @@ -15,7 +15,7 @@ export type UseEChartsOptions = EChartEventsProps & Parameters[2] & { group?: ECharts['group'] theme?: Parameters[1] - use?: Parameters[0] + init: typeof init } export function useECharts( diff --git a/src/utils/chart-init.ts b/src/utils/chart-init.ts index fcf3594..2a0e27f 100644 --- a/src/utils/chart-init.ts +++ b/src/utils/chart-init.ts @@ -1,21 +1,6 @@ -import { init, use as echartsUse, type ECharts } from 'echarts/core' +import type { ECharts } from 'echarts/core' import type { UseEChartsOptions } from '../use-echarts' -export async function getGlobalUse() { - const modules = [ - import('echarts/features'), - import('echarts/charts'), - import('echarts/components'), - import('echarts/renderers') - ] - - const loadedModules = await Promise.all( - modules.map((m) => m.then((m) => Object.values(m))) - ) - - return loadedModules.flat() -} - export function initializeECharts( container: T, options: UseEChartsOptions @@ -32,7 +17,7 @@ export function initializeECharts( width } = options - return init(container, theme, { + return options.init(container, theme, { devicePixelRatio, height, locale, @@ -49,9 +34,5 @@ export async function setupECharts( options: UseEChartsOptions ): Promise { if (!container) return - - const useOpts = options.use || (await getGlobalUse()) - echartsUse(useOpts) - return initializeECharts(container, options) }