apache / apache/echarts

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

Open
#15,138 6 comments 0 reactions 0 assignees View on GitHub
FAQ waiting-for: community
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### 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}
{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:**
![image](https://user-images.githubusercontent.com/17777813/121697954-2d3c8b80-caeb-11eb-8d9c-4e6321ad8603.png)

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**
![image](https://user-images.githubusercontent.com/17777813/121698034-40e7f200-caeb-11eb-82f7-6783a609119c.png)

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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.