treeshaking not working as expected

[mchl18]

hi guys,

I wanted to use the instructions to use tree shaking and then did an analysis of the bundle.

See for yourself

thats a total of 6mb for rendering three different kinds of charts. don't think that's the way it was intended. echarts show up twice, once in the vendor module where it seems like everything gets pulled in and once outside of it.

here is. my config (./config/echarts-config.ts)

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
} from 'echarts/components';
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import 'echarts/theme/macarons.js';
import * as echarts from 'echarts/core';

// Register the required components
echarts.use([
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent,
  PieChart,
]);

export { echarts };

then in my app.module.ts

import { echarts } from './config/echarts-config';
import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
....
 imports: [
    NgxEchartsDirective
 ],
 providers: [
    provideEchartsCore({ echarts })
 ],

please let me know if you can reproduce this.

[mchl18]

found out sth.

this line

import 'echarts/theme/macarons.js'

appears to make a difference.

I am honestly not sure what is going on, I created a new fresh angular repo where I imported the exact same code but there I only got a couple hundred kb as expected, whereas this angular/ionic repo we are working on spits out the whole echarts dep when using this palette.

[achraf-codemaster]

Same issue 426 (5 months ago)
not solved yet

[technbuzz]

BTW why we need app.module.ts to create custom build module, how to configure it for standalone application that do not have any modules?

Secondly I omitted the barChart from echart.use array and the didn't broke despite using barChart many times. It looks like the provideEchartCore({ echarts }) is disrepecting all the treeshake config and importing directly the global echart.