Using ECHarts Tree Shaking API's not reducing the overall package size of an Angular application

Version

5.0.1

Steps to reproduce

We compared using full echarts against echarts tree shakable API’s.

Option 1: Full ECharts imported

var echarts = require('echarts');
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option ={
    title: {
        text: '饼图程序调用高亮示例',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
};

option && myChart.setOption(option);

Our observation is this:

Total Main.js Size: 1.2 MB

Option 2: Using tree shakable API’s from ECharts

import * as echarts from 'echarts/core';

import {
  PieChart
} from 'echarts/charts';

import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components';

import {
  SVGRenderer
} from 'echarts/renderers';

echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, PieChart, SVGRenderer]
);

Observation

Total Main.js Size: 1.3 MB

What is expected?

We should get a reduced overall package size when tree shakable API is introduced.

What is actually happening?

So as you could see total size of main.js increased with tree shakable API usage. What could be the reason for the increase in package size after using tree shakable API?

Please let us know in case the approach we followed is not correct.

[echarts-bot[bot]]

@msbasanth It seems you are not using English, I’ve helped translate the content automatically. To make your issue understood by more people, we’d like to suggest using English next time. 🤗

TRANSLATED

BODY

Version

5.0.1

Steps to reproduce

We compared using full echarts against echarts tree shakable API’s.

Option 1: Full ECharts imported

var echarts = require('echarts');
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option ={
    title: {
        text:'Pie chart program call highlight example',
        left:'center'
    },
    tooltip: {
        trigger:'item',
        formatter:'{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient:'vertical',
        left:'left',
        data: ['Direct Access','Email Marketing','Affiliate Advertising','Video Advertising','Search Engine']
    },
    series: [
        {
            name:'Access source',
            type:'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name:'Direct access'},
                {value: 310, name:'Email marketing'},
                {value: 234, name:'Affiliate Ads'},
                {value: 135, name:'Video ad'},
                {value: 1548, name:'search engine'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor:'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
};

option && myChart.setOption(option);

Our observation is this:

Total Main.js Size: 1.2 MB

Option 2: Using tree shakable API’s from ECharts

import * as echarts from'echarts/core';

import {
  PieChart
} from'echarts/charts';

import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from'echarts/components';

import {
  SVGRenderer
} from'echarts/renderers';

echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, PieChart, SVGRenderer]
);

Observation

Total Main.js Size: 1.3 MB

What is expected?

We should get a reduced overall package size when tree shakable API is introduced.

What is actually happening?

So as you could see total size of main.js increased with tree shakable API usage. What could be the reason for the increase in package size after using tree shakable API?

Please let us know in case the approach we followed is not correct.

[msbasanth]

@pissang Thanks for the solution given. As suggested registered theme by passing the json theme data echarts.registerTheme('dark',theme) . Observation I could see reduction, now main.js size of the angular application is 687KB. Base Angular main.js size is 140KB, that means approx. 540KB added by echarts. So it looks like tree shaking is working as documented. Hope this is the reduction I can expect.