Smaller bundle

[Jefftopia]

DataFrame JS is massive. I'm interested in getting a smaller bundle by excluding features I don't use. In my project, I only need groups, sorts, filters, and aggregates - an in-memory grid, in other words.

Your library is one of the better grids, but I dislike getting all the module baggage with it, such as SQL, and Matrix.

Can you look into using inheritance/mixins/whatever to product different classes for different sets of DataFrame features? That should help keep things slim.

If you have other suggestions, I'm happy to hear them.

[Gmousse]

Hi @Jefftopia. You're right the bundle is really huge. The different modules such as SQL, Matrix or even Stats are already stand-alone class but are included to the DataFrame class before exporting it. But it can be easy to split them completely in the next dataframe-js feature.

Did you use this library by npm ? or directly in the browser ?

I see different ways to make dataframe-js smaller (without breaking changes):

• Split the lib like that: dataframe-js-core (that you want), dataframe-js-stat, dataframe-js-sql... which could be installed separately in npm. Then the dataframe-js library will have all of them as dependencies (in order to don't break things). Take d3js as an example.
• Create smaller browser bundles (see above).
• Make possible to only import the core without the plugins already suscribed (to make self bundled projects with webpack or other bundlers).

Is it ok for you ?

I will work on this enhancement in the next week-end.

[Jefftopia]

@Gmousse I'll leave implementation up to you, but yes, I would either split them off into smaller repos like d3, or have a "monorepo" that exports core, stat, dataframe-sql, etc, like ngrx/platform.

Personally, I use es6 imports and webpack/angular-cli to bundle.

I'm wondering if adding modules can be done with an exported decorator.

[Gmousse]

Hi @Jefftopia, I have test some things in order to see how reduce the bundle. Indeed, it's already possible. See this example:

I have an index.js in a fake project that I bundle (npm run build) with a preconfigured webpack.

---

If import dataframe-js as usual (the whole package):

index.js

import DataFrame from 'dataframe-js';
console.log(DataFrame.sql);  // It prints the module as expected

Then I build the fake project and look at the bundle size:

du -h build/static/js/                
1,7M    build/static/js/

---

If I need only the dataframe-js core :

index.js

import DataFrame from 'dataframe-js/lib/dataframe';
console.log(DataFrame.sql);  // It prints undefined, the sql is not suscribed

Then I build the fake project and look at the bundle size:

du -h build/static/js/                
812K    build/static/js/

The bundle only includes the DataFrame core.

---

If I need only the dataframe-js core and the sql module:

index.js

import DataFrame from 'dataframe-js/lib/dataframe';
import SQL from 'dataframe-js/lib/modules/sql';
DataFrame.setDefaultModules(SQL)

Then I build the fake project and look at the bundle size:

du -h build/static/js/                
856K    build/static/js/

The bundle only includes the DataFrame core and the sql module.

It's a temporary workaround for you.

I will see how to reduce again the bundle, but it's a first step.

[Jefftopia]

@Gmousse Thanks for the solution. Since the original problem is solved, feel free to close.

This is really about interface design. I dislike importing the two libs then calling the static method, but it works.