Question: why is the unzipped version over 1.7 MB in size?

Just wondering after I added vue-grid-layout to my dependencies, I received a warning from webpack report:

                                                  Asset       Size  Chunks                    Chunk Names
               static/js/vendor.e0edbedd8d1dfc9f9886.js     1.9 MB       0  [emitted]  [big]  vendor

was before:

                                                  Asset       Size  Chunks             Chunk Names
               static/js/vendor.2b8e22f0b833885a5a5f.js    83.5 kB       0  [emitted]  vendor

Surely I can switch to the minified version which seems currently at 183KB, but I am still curious what (probably other dependency) makes vue-grid-layout so big? 😃

Thanks for all your efforts in releasing this lib open-source.

[Ranmus]

With current webpack configuration library is so big because all dependencies are statically included (i don’t take into account dev-dependencies like babel core etc.). So when you build your own project, output bundle will technically contain two Vue copies, one required for project and one required for vue-grid-layout. And these two copies are not the same. Check this article: https://medium.com/webpack/webpack-bits-getting-the-most-out-of-the-commonschunkplugin-ab389e5f318

To resolve this, use common chunks plugin like in article above.

Another solution is to exclude dependencies like Vue by using “externals” directive in webpack config: https://webpack.js.org/configuration/externals/

For example if some library has dependencies like vue, vuex, vue-resource, we can exclude them from distribution file by defining in webpack configuration (configuration for this library, not your application!): externals: { ‘vue’: ‘vue’, ‘vuex’: ‘vuex’, ‘vue-resource’: ‘vue-resource’, },

Libraries listed above are now treaten like they are present in current javascript environment (for example browser), so in application that uses library, must provide these libraries explicitly like:

import Vue from ‘vue’; import Vuex from ‘vuex’; import VueResource from ‘vue-resource’; imoprt SomeLibrary from ‘some-library’;

So if vue-grid-layout would be in webpack config defined externals with Vue and Interact, usage of grid for end user would be: import Vue from ‘vue’; import interact from ‘interact.js’; import VueGridLayout from ‘vue-grid-layout’;

[gmsa]

I’ll try and make a new build this week