Gmousse / dataframe-js

No Maintenance Intended
https://gmousse.gitbooks.io/dataframe-js/
MIT License
460 stars 38 forks source link

Smaller bundle #25

Closed Jefftopia closed 6 years ago

Jefftopia commented 6 years ago

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 commented 6 years ago

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):

Is it ok for you ?

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

Jefftopia commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

@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.