Ngx-charts: Bundle Size

[cfremgen]

I'm submitting a ... (check one with "x")

[x] feature request

Current behavior
Big bundle size. Nearly half of the size of the Angular framework.

Reproduction of the problem
Run webpack bundle analyzer

What is the motivation / use case for changing the behavior?
Reduce bundle size

• ngx-charts version: x.x.x
  7.0.1

• Angular version: 2.x.x
  5.2.0

Large bundle size for index file:

I have to import the entire module to use this library. It would be nice to only import the features I am using.

[sandangel]

I think you can do so. Only import common and the chart module you use.

[cfremgen]

For example,

import { ChartCommonModule } from '@swimlane/ngx-charts/release/common';
import { LineChartModule } from '@swimlane/ngx-charts/release/line-chart';

Now I get 404's on the styles

Do you know how to import the styles too?

[sandangel]

you should inline the css file through a build process

[cfremgen]

Using angular CLI, when inlining through the build process styles are bundled in to the main application styles. This means "tootltip.component.css" file does not exist at the root directory.

This means the components in the referenced modules are trying to reference a .css that doesn't exist.

[pietmichal]

Any progress on this issue?

[cfremgen]

No

[pietmichal]

@cfremgen

Just use

import { LineChartModule } from '@swimlane/ngx-charts';

and it works :tada:

You don't have to import a common charts module.

But based on what I've seen in the source code - the resulting bundle size can be improved.

[amitdahan]

Importing BarChartModule using:

import {BarChartModule} from '@swimlane/ngx-charts';

results in around 1MB of raw ngx-charts in my bundle,
while importing using:

import {BarChartModule} from '@swimlane/ngx-charts/release/bar-chart/bar-chart.module';

results in 538kb of only the relevant module in my bundle.

Is this intendend? What about further modulizing this? In my case, I'm only using <ngx-charts-bar-vertical-2d />...

EDIT:

Scratch that, it reduces bundle size but doesn't even work (it leaves out important css files, throws some errors)

[dparish]

Update:

I'm running Angular 6.0.1 with ngx-charts 8.0.0.

My imports look like this:

    ...
    ChartCommonModule,
    AreaChartModule,
    BarChartModule,
    LineChartModule,
    NumberCardModule,
    PieChartModule,
    ....

I still get a ngx-charts/release/index.js whose stat size is 1.15MB and parsed size is 450k

I had to look it up parsed is after minification

Considering that my entire prod bundle size is 2.2MB, charts is a pretty high percentage. Anything you guys can do to reduce it would be terrific. Perhaps tree shakable providers is the answer?

[FrancescoBorzi]

I can confirm this issue and it looks quite serious.

Using ngx-charts 9.0.0 the bundle size is 1.64 MB, almost the same as Angular which for me is 1.78 MB.

My ng -v output:

Angular CLI: 6.1.3
Node: 8.10.0
OS: linux x64
Angular: 6.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.7.3
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.7.3
@angular-devkit/schematics 0.7.3
@angular/cli 6.1.3
@ngtools/webpack 6.0.8
@schematics/angular 0.7.3
@schematics/update 0.7.3
rxjs 6.2.2
typescript 2.9.2
webpack 4.8.3

[eugenefurs]

I fixed this problem by

1. "d3": "^4.10.2", (previously was 5.0.0)
2. Importing only necessary modules (LineChartModule, BarChartModule)

Resulting bundle chunk decreased from 799 KB to 276 KB

[manandkumaar]

Any update on this?

I am getting the below error when i import only the required modules.

These are the modules i have included in my feature module.

import { ChartCommonModule } from '@swimlane/ngx-charts/release/common';
import { PieChartModule, BarChartModule, LineChartModule, BubbleChartModule } from '@swimlane/ngx-charts';

Versions:-
ngx-charts - 9.0.0
Angular - 7.0.0

Your help much appreciated. Thanks in advance

[vmandy]

I believe I'm having the same issue.

In my case, I simply want to use the LineChartComponent, and would like to tree-shake out everything else from my bundle.

like those above, I've tried the following which did not reduce my bundle size when compared to importing NgxChartsModule:

import { LineChartModule } from '@swimlane/ngx-charts';

I then tried the proposed solution above to explicitely import ChartCommonModule & LineChartModule from their sub-folders under @swimlane/ngx-charts/release.

As above, this resulted in a smaller bundle size, but I now have the same CSS errors mentioned above.

I've also tried referring to issues #623 & #22, which both mention tree-shaking. There is even a mention of PR #1004 which supposedly enables tree-shaking.

I am looking for a definite answer: _Is tree-shaking of this library possible? And if so, can someone please provide a documented example (or Plunker/Stackblitz) of how to do it correctly_

Thank you in advance for your help

[cfremgen]

Closing, fixed in https://github.com/swimlane/ngx-charts/pull/1004

Ex:

import { LineChartModule } from '@swimlane/ngx-charts';

@NgModule({
    declarations: [
    ],
    imports: [
        LineChartModule
    ],
    exports: [
    ]
})
export class SharedModule { }

[nncl]

Hello, I'm sorry to comment on a closed issue, but for me at least on my two tests that I've made the bundle size of BarChartModule is still big - 1.4MB and when I remove it decreases to just 127KB.

The current version is 13.0.2, on Angular 8. Is there anything else to do in order to reduce its size?

Thanks for this amazing job guys.

[marcoripa96]

Hello, the same problem is happening to me. I'm including only PieChartModule and my component budle size spikes up. As soon as I remove the import the size goes back to normale.

The current version is 13.0.2, on Angular 9.

[Kyusung4698]

@marcoripa96 Can confirm this is still an issue with following version:

@swimlane/ngx-charts: 14.0.0
@angular: 9.1.7

[EmreAkkoc]

@swimlane/ngx-charts: 14.0.0
@angular: 9.1.7

adds a whole 1.95 mb to my bundle. too bad, I really liked the gauge charts.

[tobiso95]

I am also having this problem. Importing only the PieChartModule results in an import of the whole package.

ngx-charts 18.0.1
angular 11.2.3