Table Component increases my JS file size by around 700kbs?

[GreggOrdHume]

Hello,

I noticed after import TableComponent from 'vue-table-component'; my file size grows by +-700kb's.

If i inspect the index.js file in node_modules/vue-table-component/dist/i see a size of 231kb If i inspect the app.js file in node_modules/vue-table-component/docs/build/i see a size of 988kb

• Could you explain if this large file size increase i am experiencing is correct, it doesnt match either of the above file sizes?
• If so could you explain why the largeness of this file size?
• Could you explain which files are necessary to load or another way to load in this table component that could reduce the file size?
• Could this possibly be a build issue in my setup (webpack)? or perhaps a build issue of yours?

Many thanks, Gregg

[sebastiandedeyne]

Interesting, this sounds pretty big indeed. I'll try to look into this soon!

[sebastiandedeyne]

First off, we should only be looking at minified sizes. Dev build sizes are pretty meaningless to compare.

How much does your file size grow when minified?

If it's a lot, it could be that Vue's included twice. If you could provide a fill webpack module listing of what's included in your bundle I could take a look.

If i inspect the index.js file in node_modules/vue-table-component/dist/i see a size of 231kb If i inspect the app.js file in node_modules/vue-table-component/docs/build/i see a size of 988kb

This is because Vue is included in app.js, and not in the dist folder. This file should be minified though, gonna fix that.

Also: refactored some stuff that reduced the size om 64kb min to 52kb min (will tag a new version soon). Gonna look into using a different bundler in the future and optimise more then :)

[sebastiandedeyne]

I think Moment.js also adds a fairly large chunk to your app when using this library. Gonna see if we can remove that dependency, or at least make it optional.

[GreggOrdHume]

• on the dev build size : i agree (although 988kb is still pretty large, but thats not the point here)
• I haven't installed UglifyJS yet, i assumed the Table Component would be minified as your default, what would the purpose be to import a non minified file?
• how much does my file shrink : i am yet to check, perhaps i will get onto minify this weekend to do a test.
• I had that thought about 'moments.js' but minified with locales its 63kbs, i guess you could remove it as a dependancy and maybe instead go with my suggestion of sort-value and show-value as in relates #82. This way for dates we could put sort-value in as timestamps which is simply a number sort and show-value can be what you want the user to see.

Updated: I see you asked for bundle:

// Vue
const Vue = require('vue');
window.Vue = Vue;

// this happens in another file but for demonstration purposes i have added it here
import TableComponent from 'vue-table-component';
Vue.use(TableComponent);

// Jquery
const $ = require('jquery');
window.jQuery = $;
window.$ = $;

// Tether (bootstrap dependancy)
const popper = require('popper.js');
window.Popper = popper;

// Bootstrap
// require('bootstrap');
require('bootstrap/dist/js/bootstrap.min.js');

// Bootstrap Select
require('./vendors/bootstrap-select.js');

A MASSIVE THANKS FOR THE RESPONSE! 👍

[jonnywilliamson]

@sebastiandedeyne Please check out https://www.npmjs.com/package/moment-mini for using moment without all the bloat. It might be a help

[sebastiandedeyne]

@GreggOrdHume What I actually meant is the CLI output of running Webpack with the --display-modules flag :)

[GreggOrdHume]

@sebastiandedeyne - that is a very neat flag!

* I removed a few unnecessary lines to make this neater

Hash: 627c941458cd666a8047
Version: webpack 3.8.1
Time: 16736ms
                     Asset     Size  Chunks                    Chunk Names
   [0] ./node_modules/moment/moment.js 130 kB {0} [built]
   [2] ./node_modules/vue/dist/vue.min.js 85.9 kB {1} {2} [built]
   [3] ./node_modules/timers-browserify/main.js 1.36 kB {1} {2} [built]
   [4] ./node_modules/setimmediate/setImmediate.js 6.47 kB {1} {2} [built]
   [5] ./node_modules/process/browser.js 5.42 kB {1} {2} [built]
   [6] ./node_modules/jquery/dist/jquery.js 268 kB {1} [built]
   [7] ./node_modules/moment/locale/af.js 2.4 kB {0} [optional] [built]
   [8] ./node_modules/moment/locale/ar.js 4.09 kB {0} [optional] [built]
   [9] ./node_modules/moment/locale/ar-dz.js 1.9 kB {0} [optional] [built]
  [10] ./node_modules/moment/locale/ar-kw.js 1.89 kB {0} [optional] [built]
  [11] ./node_modules/moment/locale/ar-ly.js 3.69 kB {0} [optional] [built]
  [12] ./node_modules/moment/locale/ar-ma.js 1.95 kB {0} [optional] [built]
  [13] ./node_modules/moment/locale/ar-sa.js 2.81 kB {0} [optional] [built]
  [14] ./node_modules/moment/locale/ar-tn.js 1.86 kB {0} [optional] [built]
  [15] ./node_modules/moment/locale/az.js 3.01 kB {0} [optional] [built]
  [16] ./node_modules/moment/locale/be.js 4.49 kB {0} [optional] [built]
  [17] ./node_modules/moment/locale/bg.js 2.85 kB {0} [optional] [built]
  [18] ./node_modules/moment/locale/bm.js 2.04 kB {0} [optional] [built]
  [19] ./node_modules/moment/locale/bn.js 3.22 kB {0} [optional] [built]
  [20] ./node_modules/moment/locale/bo.js 3.47 kB {0} [optional] [built]
  [21] ./node_modules/moment/locale/br.js 3.12 kB {0} [optional] [built]
  [22] ./node_modules/moment/locale/bs.js 4.48 kB {0} [optional] [built]
  [23] ./node_modules/moment/locale/ca.js 3.07 kB {0} [optional] [built]
  [24] ./node_modules/moment/locale/cs.js 6.11 kB {0} [optional] [built]
  [25] ./node_modules/moment/locale/cv.js 2.15 kB {0} [optional] [built]
  [26] ./node_modules/moment/locale/cy.js 2.75 kB {0} [optional] [built]
  [27] ./node_modules/moment/locale/da.js 1.91 kB {0} [optional] [built]
  [28] ./node_modules/moment/locale/de.js 2.72 kB {0} [optional] [built]
  [29] ./node_modules/moment/locale/de-at.js 2.8 kB {0} [optional] [built]
  [30] ./node_modules/moment/locale/de-ch.js 2.73 kB {0} [optional] [built]
  [31] ./node_modules/moment/locale/dv.js 2.37 kB {0} [optional] [built]
  [32] ./node_modules/moment/locale/el.js 3.52 kB {0} [optional] [built]
  [33] ./node_modules/moment/locale/en-au.js 2.18 kB {0} [optional] [built]
  [34] ./node_modules/moment/locale/en-ca.js 2.02 kB {0} [optional] [built]
  [35] ./node_modules/moment/locale/en-gb.js 2.19 kB {0} [optional] [built]
  [36] ./node_modules/moment/locale/en-ie.js 2.18 kB {0} [optional] [built]
  [37] ./node_modules/moment/locale/en-nz.js 2.19 kB {0} [optional] [built]
  [38] ./node_modules/moment/locale/eo.js 2.44 kB {0} [optional] [built]
  [39] ./node_modules/moment/locale/es.js 3.49 kB {0} [optional] [built]
  [40] ./node_modules/moment/locale/es-do.js 3.47 kB {0} [optional] [built]
  [41] ./node_modules/moment/locale/es-us.js 2.8 kB {0} [optional] [built]
  [42] ./node_modules/moment/locale/et.js 2.9 kB {0} [optional] [built]
  [43] ./node_modules/moment/locale/eu.js 2.2 kB {0} [optional] [built]
  [44] ./node_modules/moment/locale/fa.js 2.93 kB {0} [optional] [built]
  [45] ./node_modules/moment/locale/fi.js 3.62 kB {0} [optional] [built]
  [46] ./node_modules/moment/locale/fo.js 1.94 kB {0} [optional] [built]
  [47] ./node_modules/moment/locale/fr.js 2.74 kB {0} [optional] [built]
  [48] ./node_modules/moment/locale/fr-ca.js 2.36 kB {0} [optional] [built]
  [49] ./node_modules/moment/locale/fr-ch.js 2.52 kB {0} [optional] [built]
  [50] ./node_modules/moment/locale/fy.js 2.5 kB {0} [optional] [built]
  [51] ./node_modules/moment/locale/gd.js 2.41 kB {0} [optional] [built]
  [52] ./node_modules/moment/locale/gl.js 2.57 kB {0} [optional] [built]
  [53] ./node_modules/moment/locale/gom-latn.js 4.1 kB {0} [optional] [built]
  [54] ./node_modules/moment/locale/gu.js 3.56 kB {0} [optional] [built]
  [55] ./node_modules/moment/locale/he.js 3.09 kB {0} [optional] [built]
  [56] ./node_modules/moment/locale/hi.js 3.46 kB {0} [optional] [built]
  [57] ./node_modules/moment/locale/hr.js 4.6 kB {0} [optional] [built]
  [58] ./node_modules/moment/locale/hu.js 3.74 kB {0} [optional] [built]
  [59] ./node_modules/moment/locale/hy-am.js 2.95 kB {0} [optional] [built]
  [60] ./node_modules/moment/locale/id.js 2.67 kB {0} [optional] [built]
  [61] ./node_modules/moment/locale/is.js 4.21 kB {0} [optional] [built]
  [62] ./node_modules/moment/locale/it.js 2.26 kB {0} [optional] [built]
  [63] ./node_modules/moment/locale/ja.js 2.13 kB {0} [optional] [built]
  [64] ./node_modules/moment/locale/jv.js 2.68 kB {0} [optional] [built]
  [65] ./node_modules/moment/locale/ka.js 2.87 kB {0} [optional] [built]
  [66] ./node_modules/moment/locale/kk.js 2.41 kB {0} [optional] [built]
  [67] ./node_modules/moment/locale/km.js 1.86 kB {0} [optional] [built]
  [68] ./node_modules/moment/locale/kn.js 3.5 kB {0} [optional] [built]
  [69] ./node_modules/moment/locale/ko.js 2.31 kB {0} [optional] [built]
  [70] ./node_modules/moment/locale/ky.js 2.42 kB {0} [optional] [built]
  [71] ./node_modules/moment/locale/lb.js 4.46 kB {0} [optional] [built]
  [72] ./node_modules/moment/locale/lo.js 2.12 kB {0} [optional] [built]
  [73] ./node_modules/moment/locale/lt.js 4.06 kB {0} [optional] [built]
  [74] ./node_modules/moment/locale/lv.js 3.61 kB {0} [optional] [built]
  [75] ./node_modules/moment/locale/me.js 3.79 kB {0} [optional] [built]
  [76] ./node_modules/moment/locale/mi.js 2.23 kB {0} [optional] [built]
  [77] ./node_modules/moment/locale/mk.js 2.87 kB {0} [optional] [built]
  [78] ./node_modules/moment/locale/ml.js 2.56 kB {0} [optional] [built]
  [79] ./node_modules/moment/locale/mr.js 4.84 kB {0} [optional] [built]
  [80] ./node_modules/moment/locale/ms.js 2.57 kB {0} [optional] [built]
  [81] ./node_modules/moment/locale/ms-my.js 2.63 kB {0} [optional] [built]
  [82] ./node_modules/moment/locale/my.js 2.55 kB {0} [optional] [built]
  [83] ./node_modules/moment/locale/nb.js 2.06 kB {0} [optional] [built]
  [84] ./node_modules/moment/locale/ne.js 3.39 kB {0} [optional] [built]
  [85] ./node_modules/moment/locale/nl.js 3.25 kB {0} [optional] [built]
  [86] ./node_modules/moment/locale/nl-be.js 3.27 kB {0} [optional] [built]
  [87] ./node_modules/moment/locale/nn.js 1.92 kB {0} [optional] [built]
  [88] ./node_modules/moment/locale/pa-in.js 3.59 kB {0} [optional] [built]
  [89] ./node_modules/moment/locale/pl.js 4.16 kB {0} [optional] [built]
  [90] ./node_modules/moment/locale/pt.js 2.15 kB {0} [optional] [built]
  [91] ./node_modules/moment/locale/pt-br.js 2.09 kB {0} [optional] [built]
  [92] ./node_modules/moment/locale/ro.js 2.38 kB {0} [optional] [built]
  [93] ./node_modules/moment/locale/ru.js 6.87 kB {0} [optional] [built]
  [94] ./node_modules/moment/locale/sd.js 2.23 kB {0} [optional] [built]
  [95] ./node_modules/moment/locale/se.js 2.06 kB {0} [optional] [built]
  [96] ./node_modules/moment/locale/si.js 2.22 kB {0} [optional] [built]
  [97] ./node_modules/moment/locale/sk.js 5.26 kB {0} [optional] [built]
  [98] ./node_modules/moment/locale/sl.js 5.94 kB {0} [optional] [built]
  [99] ./node_modules/moment/locale/sq.js 2.24 kB {0} [optional] [built]
 [100] ./node_modules/moment/locale/sr.js 3.76 kB {0} [optional] [built]
 [101] ./node_modules/moment/locale/sr-cyrl.js 3.78 kB {0} [optional] [built]
 [102] ./node_modules/moment/locale/ss.js 2.84 kB {0} [optional] [built]
 [103] ./node_modules/moment/locale/sv.js 2.19 kB {0} [optional] [built]
 [104] ./node_modules/moment/locale/sw.js 1.92 kB {0} [optional] [built]
 [105] ./node_modules/moment/locale/ta.js 3.78 kB {0} [optional] [built]
 [106] ./node_modules/moment/locale/te.js 2.81 kB {0} [optional] [built]
 [107] ./node_modules/moment/locale/tet.js 2.25 kB {0} [optional] [built]
 [108] ./node_modules/moment/locale/th.js 2.14 kB {0} [optional] [built]
 [109] ./node_modules/moment/locale/tl-ph.js 2.01 kB {0} [optional] [built]
 [110] ./node_modules/moment/locale/tlh.js 3.75 kB {0} [optional] [built]
 [111] ./node_modules/moment/locale/tr.js 2.62 kB {0} [optional] [built]
 [112] ./node_modules/moment/locale/tzl.js 3.31 kB {0} [optional] [built]
 [113] ./node_modules/moment/locale/tzm.js 1.89 kB {0} [optional] [built]
 [114] ./node_modules/moment/locale/tzm-latn.js 1.93 kB {0} [optional] [built]
 [115] ./node_modules/moment/locale/uk.js 5.04 kB {0} [optional] [built]
 [116] ./node_modules/moment/locale/ur.js 2.28 kB {0} [optional] [built]
 [117] ./node_modules/moment/locale/uz.js 1.86 kB {0} [optional] [built]
 [118] ./node_modules/moment/locale/uz-latn.js 1.91 kB {0} [optional] [built]
 [119] ./node_modules/moment/locale/vi.js 2.47 kB {0} [optional] [built]
 [120] ./node_modules/moment/locale/x-pseudo.js 2.3 kB {0} [optional] [built]
 [121] ./node_modules/moment/locale/yo.js 1.99 kB {0} [optional] [built]
 [122] ./node_modules/moment/locale/zh-cn.js 3.21 kB {0} [optional] [built]
 [123] ./node_modules/moment/locale/zh-hk.js 3.03 kB {0} [optional] [built]
 [124] ./node_modules/moment/locale/zh-tw.js 2.98 kB {0} [optional] [built]
 [127] ./node_modules/popper.js/dist/esm/popper.js 80.8 kB {1} [built]
 [128] ./node_modules/bootstrap/dist/js/bootstrap.min.js 50.6 kB {1} [built]
 [129] ./node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js 33.5 kB {1} [built]
 [130] ./local/js/vendors/bootstrap-select.js 71.5 kB {1} [built]
 [131] ./node_modules/accounting/accounting.min.js 3.15 kB {1} [built]
 [132] ./node_modules/dateformat/lib/dateformat.js 7.33 kB {1} [built]
 [136] ./node_modules/vue-table-component/dist/index.js 231 kB {0} [built]
 [137] (webpack)/buildin/module.js 495 bytes {0} [built]
 [138] ./node_modules/moment/locale ^\.\/.*$ 2.86 kB {0} [optional] [built]

[jonnywilliamson]

As you can see it's the locales in moment that cause all the bloat. The only way around that I know is to use moment-mini

[GreggOrdHume]

@jonnywilliamson I will give that a try today and feedback the results :)

[sebastiandedeyne]

Your module listing looks good, don't see anything wrong! Vue is only included once, which is the important part.

The file size isn't unexpected, since there are a few large libraries in there. Moment is a pretty big chunk, I'm gonna look into removing it entirely if possible (#87) (I'd prefer that over something like moment-mini)

Gonna close this issue since it looks resolved. If you have any more questions don't be shy!

[ankurk91]

If you are using webpack you may want to read this https://github.com/moment/moment/issues/2373

// update your webpack configs
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
]