Tree-shaking with Vite

[astorije]

Hi there,

We are using react-echarts with Vite and I wanted to look into the use prop to reduce bundle size, but nothing I do seems to have an effect on the bundle size.

Do you happen to have an example of a setup that successfully tree-shakes modules that are not in use? The result could be seen with https://github.com/KusStar/vite-bundle-visualizer

If not, I'll build a minimal repro case and see if I can share that. Thank you!!

[badsyntax]

I think this happens because it's a runtime condition check, and vite cannot know the value of the condition at build time, thus includes all the default imports.

Here we either use the custom use, or the defualt use (getGlobalUse()):

react-echarts/src/utils/chart-init.ts

Line 53 in e2ec79f

const useOpts = options.use || (await getGlobalUse())

getGlobalUse() imports everything:

react-echarts/src/utils/chart-init.ts

Lines 4 to 17 in e2ec79f

	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()
	}

So even if you supply a custom use option it will still include all the default imports in the build.

This package will need a slight re-org to allow better configuration of use, in the meantime you can apply the following patch (eg using patch-package) which will fix the tree shaking:

diff --git a/node_modules/@kbox-labs/react-echarts/dist/index.mjs b/node_modules/@kbox-labs/react-echarts/dist/index.mjs
index 615d5d5..cfa5ee6 100644
--- a/node_modules/@kbox-labs/react-echarts/dist/index.mjs
+++ b/node_modules/@kbox-labs/react-echarts/dist/index.mjs
@@ -40,7 +40,7 @@ function initializeECharts(container, options) {
 }
 async function setupECharts(container, options) {
   if (!container) return;
-  const useOpts = options.use || await getGlobalUse();
+  const useOpts = options.use;
   echartsUse(useOpts);
   return initializeECharts(container, options);
 }

[hugocxl]

Hi @badsyntax! Thanks for taking a look into this 🙏

What do you think if we remove the use prop from the library (allowing using the use function on their own)?

echarts is treated as a peer dep, so you would have to install it and explicitly call the echarts.use function.
The only requirement would be having to call it before the init function. In our case, instantiating the component