Reduce Bundle Size

[davidgolub]

Hi, the Bizcharts bundle size is huge ( )

How do you reduce it?

[yoyo837]

need this.

[dreamy-dev]

same, I want to use it but it's way too large...

[DudeHu]

i also confused by this problem, too large

[stefanfuchs]

I tried the same technique as I used to reduce my lodash bundle size, and it worked. Tree shaking will only work when you import individual components from their respective files. Bizcharts only occupies 36Kb in my bundle now. I'm using bizcharts V4. This is what I have done:

Change:

import { Chart, Tooltip, Legend, Axis, Area, Line } from "bizcharts";

to:

import Chart from 'bizcharts/lib/components/Chart';
import Tooltip from 'bizcharts/lib/components/Tooltip';
import Legend from 'bizcharts/lib/components/Legend';
import Axis from 'bizcharts/lib/components/Axis';
import Area from 'bizcharts/lib/geometry/Area';
import Line from 'bizcharts/lib/geometry/Line';

If you need other components than I have shown in the example above, simply add them to the imports. Check the index.tsx file in the bizcharts source code to help you find the correct path for the imports.

Also, if you use the Geom or Geometry components, stop using them, because they will also import all the other components from bizcharts automatically. Use more specific ones instead, like Line or Point. Example:

Change:

<Geometry type="line" position={"item*value"} />
<Geometry type="point" position={"item*value"} />

to:

<Line position={"item*value"} />
<Point position={"item*value"} />

[sunkehappy]

@stefanfuchs Your method is much complicated. We can't we just use import { Chart } from "bizcharts"; like Ant Design

[stefanfuchs]

@sunkehappy Well, just look here: https://github.com/alibaba/BizCharts/blob/master/src/index.tsx When you import bizcharts like this: import { Chart } from "bizcharts". All those files inside index.tsx are imported as well. That's why the bundle size gets so large.

I agree that importing like this would be much easier, but it would require some optimization in the bizcharts code itself to reduce the bundle size. Unfortunatelly I don't have any experience in doing this sort of optimization.

Any sugestions would be appreciated. If we knew a solution, maybe we could do a PR to fix this.

[sunkehappy]

@stefanfuchs Sounds interesting. I will take a deep look at this and try to fix it if possible.

[sunkehappy]

@stefanfuchs We can simply enable the tree shaking by importing files from the es directory. We can do this by importing files from bizcharts/es instead of simply bizcharts. Or by change the resolve strategy of webpack by adding the resolve: { mainFields: ["module", "main"] } in webpack.config.js file.

[stefanfuchs]

@sunkehappy interesting. So importing like this: import { Chart } from "bizcharts/es" should work? Have you tested to see if the bundle size gets reduced this way?

[sunkehappy]

@stefanfuchs Now I see that although size gets reduced. But feature is not working. I'm curious why. I need more research.

[stefanfuchs]

Maybe we could see how antd did this, because in v4 they did some optimizations regarding icons. All the icons were being imported in the bundle, even when you just wanted to use one icon.