Bundle size optimisation

[veged]

Is there any way to optimize bundle size for my custom Plotly.js build?

Right now plotly-basic.js is 215.7K and, for example, highcharts.js is 70K.

I try to do something like this (accordingly to my custom needs in simple line plot):

diff --git lib/index-basic.js lib/index-basic.js
index 4c837e4..583da70 100644
--- lib/index-basic.js
+++ lib/index-basic.js
@@ -10,9 +10,4 @@

 var Plotly = require('./core');

-Plotly.register([
-    require('./bar'),
-    require('./pie')
-]);
-
 module.exports = Plotly;
diff --git src/core.js src/core.js
index f226b44..a667fe1 100644
--- src/core.js
+++ src/core.js
@@ -41,8 +41,8 @@ exports.moveTraces = Plotly.moveTraces;
 exports.purge = Plotly.purge;
 exports.setPlotConfig = require('./plot_api/set_plot_config');
 exports.register = require('./plot_api/register');
-exports.toImage = require('./plot_api/to_image');
-exports.downloadImage = require('./snapshot/download');
+//exports.toImage = require('./plot_api/to_image');
+//exports.downloadImage = require('./snapshot/download');
 exports.validate = require('./plot_api/validate');
 exports.addFrames = Plotly.addFrames;
 exports.deleteFrames = Plotly.deleteFrames;
@@ -54,15 +54,15 @@ exports.register(require('./traces/scatter'));
 // register all registrable components modules
 exports.register([
     require('./components/fx'),
-    require('./components/legend'),
+    //require('./components/legend'),
     require('./components/annotations'),
-    require('./components/annotations3d'),
+    //require('./components/annotations3d'),
     require('./components/shapes'),
-    require('./components/images'),
+    //require('./components/images'),
     require('./components/updatemenus'),
     require('./components/sliders'),
-    require('./components/rangeslider'),
-    require('./components/rangeselector')
+    //require('./components/rangeslider'),
+    //require('./components/rangeselector')
 ]);

 // plot icons
@@ -71,7 +71,7 @@ exports.Icons = require('../build/ploticon');
 // unofficial 'beta' plot methods, use at your own risk
 exports.Plots = Plotly.Plots;
 exports.Fx = require('./components/fx');
-exports.Snapshot = require('./snapshot');
+//exports.Snapshot = require('./snapshot');
 exports.PlotSchema = require('./plot_api/plot_schema');
 exports.Queue = require('./lib/queue');

But I achieve only 194K (instead of 215.7K initially) in final plotly-basic.min.js.gz.

Is there any way for further optimization of bundle size? What's the easiest way to understand an unneeded code and cut it off?

[etpinard]

What's the easiest way to understand an unneeded code and cut it off?

I'd recommend using disc. Piping browserify --full-paths lib/index-basic.js | discify into a codepen gives: https://codepen.io/etpinard/full/YQVqeX/

[etpinard]

@veged from your :+1: reaction, I'll assume that my reply was satisfactory.

As this issue won't directly result in a PR, I'll close it.

Note that, we are planning on excluding components/ from plotly.js/lib/core in v2 which should help shrink custom bundles with less effort.

Thanks for writing in.

[veged]

@etpinard actually I can't make any significant size cuts :-/

here is the disc I've got: https://codepen.io/veged/full/XggaPM/

maybe you can help to understand which parts can be cutted off in case of rendering just trivial lines plot with annotation?

[veged]

@etpinard also, do you use somehow ability of D3 itself to customize bundle https://medium.com/towards-data-science/d3-js-the-custom-modular-bundle-now-bebd6f25bc8b ?