Tree Shaking not reducing the overall package size of an Angular application

Hi,

We compared using ngx-echarts with full echarts against echarts tree shakable API’s. For experimenting we used the demo sample given @https://github.com/xieziyu/ngx-echarts-starter

Option 1: Full ECharts imported

@NgModule({
  imports: [
    NgxEchartsModule.forRoot({
      /**
       * This will import all modules from echarts.
       * If you only need custom modules,
       * please refer to [Custom Build] section.
       */
      echarts: () => import('echarts'), // or import('./path-to-my-custom-echarts')
    }),
  ],
})

Our observation is this:

Total Main.js Size: 1.1 MB; Total Network transfer: 1.2MB

Option 2: Using tree shakable API’s from ECharts

import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components';
// Import the Canvas renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
import {
  CanvasRenderer
} from 'echarts/renderers';
import 'echarts/theme/macarons.js';

echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, LineChart, CanvasRenderer]
);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxEchartsModule.forRoot({ echarts }),
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Our observation is, Total Main.js Size: 1.2 MB; Total Network transfer: 1.2MB

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.

Thanks Basanth

[msbasanth]

I tried the suggestion from echarts contributor and looks like tree shaking is working in echarts. 👍 https://github.com/apache/echarts/issues/15138

But the same approach of registering the theme ourselves by passing json (basically avoiding require(‘echarts’)) didn’t work here with ngx-echarts.

This is what I tried, instead of importing style directly I registered theme manually.

import * as echarts from 'echarts/core';
echarts.registerTheme('dark', { <<Entire theme as json>>});

Even with this network transfer shows same size 1.2MB for the application.

[tymfear]

@xieziyu from this issue I didn’t really get how to tree shake echarts in Angular. Could you provide some examples and/or explanations other than in linked issues?