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
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:
Looking inside,
node_modules/vue-plotly/dist/vue-plotly.umd.js
appears to be including Plotly:These lines are taken verbatim from Plotly.js.
I tried using Webpack to alias
vue-plotly
to thesrc/index.js
:to no avail: