Use babel-plugin-lodash to redue bundle size

[pravi]

Fix for #5 using babel-plugin-lodash

Before,

Version: webpack 4.0.1
Child
    Hash: 942631aacfb8e1214122
    Time: 15022ms
    Built at: 30/06/2019 18:57:33
              Asset      Size    Chunks                    Chunk Names
        dagre-d3.js  3.12 MiB  dagre-d3  [emitted]  [big]  dagre-d3
    dagre-d3.js.map  3.39 MiB  dagre-d3  [emitted]         dagre-d3
    Entrypoint dagre-d3 [big] = dagre-d3.js dagre-d3.js.map

After,

Version: webpack 4.0.1
Child
    Hash: 8270ccb85e57fb1556f3
    Time: 11849ms
    Built at: 30/06/2019 18:59:18
              Asset      Size    Chunks                    Chunk Names
        dagre-d3.js  1.87 MiB  dagre-d3  [emitted]  [big]  dagre-d3
    dagre-d3.js.map  2.59 MiB  dagre-d3  [emitted]         dagre-d3
    Entrypoint dagre-d3 [big] = dagre-d3.js dagre-d3.js.map

[fabiospampinato]

I don't get the same results for some reason.

Before:

              Asset      Size    Chunks                    Chunk Names
        dagre-d3.js  1.77 MiB  dagre-d3  [emitted]  [big]  dagre-d3
    dagre-d3.js.map  1.45 MiB  dagre-d3  [emitted]         dagre-d3

After:

              Asset      Size    Chunks                    Chunk Names
        dagre-d3.js  1.89 MiB  dagre-d3  [emitted]  [big]  dagre-d3
    dagre-d3.js.map  1.55 MiB  dagre-d3  [emitted]         dagre-d3

Maybe just importing the needed modules individually (i.e. require ( 'lodash/foo' )) is a better option?

[pravi]

@fabiospampinato on a second try with a clean yarn.lock I get similar results to yours. I think the entire lodash is coming from graphlibrary dependency. https://github.com/tylingsoft/graphlibrary/blob/master/lib/lodash.js

[pravi]

With node_modules excluded from babel-loader,

Version: webpack 4.0.1
Child
    Hash: e49d864579caa4fd8e83
    Time: 3325ms
    Built at: 30/06/2019 22:09:03
              Asset      Size    Chunks                    Chunk Names
        dagre-d3.js  1.77 MiB  dagre-d3  [emitted]  [big]  dagre-d3
    dagre-d3.js.map   1.5 MiB  dagre-d3  [emitted]         dagre-d3

With node_modules included in babel-loader,

Version: webpack 4.0.1
Child
    Hash: fa20f072dd2f56420dc8
    Time: 12416ms
    Built at: 30/06/2019 22:09:59
              Asset      Size    Chunks                    Chunk Names
        dagre-d3.js  1.55 MiB  dagre-d3  [emitted]  [big]  dagre-d3
    dagre-d3.js.map  2.27 MiB  dagre-d3  [emitted]         dagre-d3

I think we can save more if we can fix graphlibrary tylingsoft/graphlibrary#4

[pravi]

With graphlibrary patched like tylingsoft/graphlibrary#5 bundle size actually increased!

Version: webpack 4.0.1
Child
    Hash: 88cfadb852efefab4e86
    Time: 12866ms
    Built at: 30/06/2019 23:06:03
              Asset      Size    Chunks                    Chunk Names
        dagre-d3.js  1.67 MiB  dagre-d3  [emitted]  [big]  dagre-d3
    dagre-d3.js.map  2.41 MiB  dagre-d3  [emitted]         dagre-d3

[fabiospampinato]

Did you try loading lodash in the same way in this library too?

I don't think babel-plugin-lodash works too well, or at least I also tried using it in the past with not much success at all.

Another detail worth mentioning is that is important to make sure that there's only 1 non-deduplicated instance of lodash in the dependency tree as shown via npm list -prod, some times even though 2 packages both require lodash they need slightly incompatible versions of it so 2 instances of lodash get included in the bundle. Resetting the lock file might help too in this situation.