dist/ builds are huge because they bundle Plotly

[Benjamin-Lee]

Hi,

I'm trying to debug what's going on with my builds, since they're all quite big. Looking at the Webpack analyzer's breakdown, I found out the vue-plotly's bundle is gigantic:

~/D/P/R/dnavisualization.org ❯❯❯ ls -lh  node_modules/vue-plotly/dist/
total 97360
-rw-r--r--  1 BenjaminLee  admin   7.1M Oct 26  1985 vue-plotly.common.js
-rw-r--r--  1 BenjaminLee  admin   8.6M Oct 26  1985 vue-plotly.common.js.map
-rw-r--r--  1 BenjaminLee  admin   7.1M Oct 26  1985 vue-plotly.umd.js
-rw-r--r--  1 BenjaminLee  admin   8.6M Oct 26  1985 vue-plotly.umd.js.map
-rw-r--r--  1 BenjaminLee  admin   3.1M Oct 26  1985 vue-plotly.umd.min.js
-rw-r--r--  1 BenjaminLee  admin    12M Oct 26  1985 vue-plotly.umd.min.js.map

Looking inside, node_modules/vue-plotly/dist/vue-plotly.umd.js appears to be including Plotly:

~/D/P/R/dnavisualization.org ❯❯❯ grep "plotly" node_modules/vue-plotly/dist/vue-plotly.umd.js | head -n 30
        exports["vue-plotly"] = factory();
        root["vue-plotly"] = factory();
        .selectAll('.plotly-notifier')
        .classed('plotly-notifier', true);
// https://github.com/plotly/plotly.js/pull/978#pullrequestreview-2403353
     * this combination makes IE barf https://github.com/plotly/plotly.js/issues/746
        .replace(/X/g, '.js-plotly-plot .plotly')
        .replace(/Y/g, '.plotly-notifier');
    // see https://github.com/plotly/plotly.js/issues/2892
// NOTE: this is currently only used OUTSIDE plotly.js (toolpanel, webapp)
// NOTE: this is only used in axes.getSubplots (only used outside plotly.js) and
    // for more info: https://github.com/plotly/plotly.js/issues/2595
                editType: 'plot', // i.e. to adjust bars is mode: 'between'. See https://github.com/plotly/plotly.js/issues/3787
    // even though it's not very plotly-esque.
 *      can be linked to Plotly.Icons to use the default plotly icons
                dragOptions.gd.emit('plotly_selecting', eventData);
                gd.emit('plotly_deselect', null);
                    gd.emit('plotly_selected', undefined);
            dragOptions.gd.emit('plotly_selected', eventData);
                gd.emit('plotly_deselect', null);
                gd.emit('plotly_selected', eventData);
        el3.classed('js-plotly-plot');
    var id = 'plotly.js-style-' + uid;
    var id = 'plotly.js-style-' + uid;
    var bgSelector = context.displayModeBar === 'hover' ? '.js-plotly-plot .plotly:hover ' : '';
    a.className = 'modebar-btn plotlyjsicon modebar-btn--logo';
    a.appendChild(this.createIcon(Icons.newplotlylogo));
    // spans two subplots. See https://github.com/plotly/plotly.js/issues/1452
        convertedInput = micropolar.adapter.plotly().convert(config);
        return micropolar.adapter.plotly().convert(plot.getLiveConfig(), true);

These lines are taken verbatim from Plotly.js.

---

I tried using Webpack to alias vue-plotly to the src/index.js:

// in my nuxt.config.js file's build section
config.resolve.alias["vue-plotly"] = "vue-plotly/src/index.js"

to no avail:

ERROR in ./node_modules/vue-plotly/src/components/Plotly.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-plotly/src/components/Plotly.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '@/utils/helper' in '/Users/BenjaminLee/Desktop/Python/Research/dnavisualization.org/node_modules/vue-plotly/src/components'
 @ ./node_modules/vue-plotly/src/components/Plotly.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-plotly/src/components/Plotly.vue?vue&type=script&lang=js&) 18:0-42 89:12-20
 @ ./node_modules/vue-plotly/src/components/Plotly.vue?vue&type=script&lang=js&
 @ ./node_modules/vue-plotly/src/components/Plotly.vue
 @ ./node_modules/vue-plotly/src/index.js
 @ ./plugins/vue-plotly.js
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js

[weisinlakd]

Any plans on tackling this issue?

[4lp]

@David-Desmaisons would you be open to a PR to update the repo to use ploty.js-dist instead of the fully plotly bundle? I'd be happy to make one if so