Howto import only necessary modules?

[psi-4ward]

All of the code was written as an ESM(ES Module) with ES6+ syntax.

How can I only import necessary modules to minify the bundle size?
I.e. import only discrete line chart without tooltips?

[netil]

Well... it's quite complicated to answer this. The full modularization is the way to go, but as thinking that chart as a product, isn't easy to divide each functionality parts as an independent module.

One realistic approach to fulfill your need is build the customized version.

• node_modules/billboard.js/package.js

{
  "name": "billboard.js",
  "version": "1.1.1",
  ...
  // change to point core.js rather than the dist
  "main": "src/core.js",

And then customize the imports.

• node_modules/billboard.js/src/core.js

...

// remove what you don't need
require("./config/config.js");
require("./internals/scale.js");
require("./internals/domain.js");
require("./data/data.js");
require("./data/data.convert.js");
require("./data/data.load.js");
require("./internals/category.js");
require("./interactions/interaction.js");
require("./internals/size.js");
require("./internals/shape.js");
require("./internals/shape.line.js");
require("./internals/shape.bar.js");
require("./internals/text.js");
require("./internals/type.js");
require("./internals/grid.js");
require("./internals/tooltip.js");
require("./internals/legend.js");
require("./internals/title.js");
require("./internals/clip.js");
require("./internals/arc.js");
require("./internals/region.js");
require("./interactions/drag.js");
require("./internals/selection.js");
require("./interactions/subchart.js");
require("./interactions/zoom.js");
require("./internals/color.js");
require("./internals/format.js");
require("./internals/cache.js");
require("./internals/class.js");
require("./api/api.focus.js");
require("./api/api.show.js");
require("./api/api.zoom.js");
require("./api/api.load.js");
require("./api/api.flow.js");
require("./api/api.selection.js");
require("./api/api.transform.js");
require("./api/api.group.js");
require("./api/api.grid.js");
require("./api/api.region.js");
require("./api/api.data.js");
require("./api/api.category.js");
require("./api/api.color.js");
require("./api/api.x.js");
require("./api/api.axis.js");
require("./api/api.legend.js");
require("./api/api.chart.js");
require("./api/api.tooltip.js");
require("./axis/bb.axis.js");
require("./internals/ua.js");

[psi-4ward]

Thanks for your answer! But it should also include only necessary D3v4 modules and to figure out what's needed is not easy.

[kunzai]

So, as this is still open and I write nearly one year later after the initial request, the question is:
"Will there be a version, where we can only import modules we need?"
"Is this already in work?"

Hope to hear some positive feedback ;)
Thanks for your efforts!

[netil]

Hi @kunzai, this is one of the major issue that I'm planning to implement. (Maybe 2.0?)

Currently, every modules(or files) are heavily coupled and to make this possible it should be re-organize to be more flexible. Also, it should provide a way as public interface for users which want to load more small sized code.

I can't guarantee to happen soon, but definitely is on the plan.

[kunzai]

Hi @netil thanks for the reply and insights on your plans!
Sounds really good and I'm and my fellow developers are looking forward to this ;)

[davidhund]

I too am very interesting in building a custom version of Billboard, using only the parts of it (and D3) I need. This would require both importing only necessary modules from D3 and Billboard and building a customized Billboard version of that.

(E.g: At the moment we need time-series-based line-charts only but the complete package (D3+Billboard) is really large.)

I looked at customizing src/core.js, like @netil describes above, in a test-project using Rollup and ES6 imports. However: I could not get it to work :-(
Any working example would be greatly appreciated!

Looking through issues in this project as well as C3, I can see 'modularizing' seems to be a feature many people would be helped with. Any thoughts on where this stands on the Roadmap?

PS: In no way do I mean to come across as critical or entitled. All your work on Billboard is really appreciated, it looks like a great lib! I'd be happy to help/test but could not get it to work yet...

[netil]

Hi @davidhund and thanks for the comments. I always waiting on this kind of feedback!
Well, the modularization is the planned task for the next major v2.0.

You can find the short(no very detailed) roadmap from below link:

• https://github.com/naver/billboard.js/wiki/Roadmap

Feel free commenting or opening an issue if you have some.
I think those attentions or interests are the main source of the motivation to make improving this project. :)

[netil]

This issue has been solved from the v2 release.

• https://github.com/naver/billboard.js/blob/master/CHANGELOG-v2.md#modularization-by-its-functionality