Using ECHarts Tree Shaking API's not reducing the overall package size of an Angular application
Opened this issue · 6 comments
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.
Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.
In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.
A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.
You may also check out the API and chart option to get the answer.
If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.
If you are interested in the project, you may also subscribe our mailing list.
Have a nice day! 🍵
@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 Do you mind providing your project so we can know what bundler and it's config are you using
@pissang I am attaching the sample which I used for checking the tree shaking behavior. It is an Angular application (v10,x) where I placed a webcomponent 'my-chart', you can find the chart code @src/assets/chart.js.
You can enable tree shakable option by commenting full import in chart.js and uncommenting tree shakable imports.
@msbasanth That's because in the theme files it references the whole echarts package. It's an issue that exists for a long time. You can extract the theme option and register it manually
dark.js:
export default const darkTheme = {
color: ...,
....
}chart.js
import darkTheme from './themes/dark';
echarts.registerTheme('dark', darkTheme);@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.
