Reduce js bundle size

[dwitvliet]

1.17 MiB seems excessive. Can be optimized either by lazy loading or by cutting down on dependencies.

[d2fong]

@dwitvliet Here is what the bundle looks like:

The largest 4 seem to be cytoscape.js, jquery, jquery-ui and core.js, which is what babel adds to the bundle to ensure ES6 features are available in all browsers.

Here are a couple of ways off the top of my head that we could potentially reduce dependencies.

1. For jquery UI bundle I think we are only using it for the autocomplete widget. It is possible that we could get rid of it if we implemented our own autocomplete bar. We could also try just getting the autocomplete widget standalone.

2. For core.js, we may be able to reduce that dependency size if we can come up with a concrete list of browsers we are willing to support e.g. last X releases. Once we do that, we can configure that list in babel which may reduce the amount of stuff we put in the bundle.

In terms of lazy loading that would be really good for the case when the user enters the site normally, but if they get a link to a network we would have to load the whole bundle.

Another interesting thing to note is that AWS/pagespeed/whatever that server is doing seems to already be splitting our bundle into two parts:

One bundle has all the dependencies, the other has all the nemanode specific code.

Let me know what you think about these ideas.

[dwitvliet]

Great visualization. Lodash also takes up a considerable part.

1) For core.js/lodash/jquery-ui, is it possible to only import the parts of the libraries that are actually used? Before using webpack, I minimally built the jquery-ui library so that it only included the portion we actually use (see the jquery-ui builder). Something like this must be possible for node/webpack as well. I don't think cytoscape supports this kind of modularisation, but jquery-ui, lodash, and core.js should. 2) The hope is for NemaNode to be able to run on most of the old machines that have been standing in labs for years without updates. The exact list of browsers is somewhat arbitrarily defined in the browserslist string here. Webpack uses this string when it compiles the css, but I'm not sure if it does for babel. Maybe it's worth looking into.

Having the library in a bundle separate from the main code is intentional. Since the main code changes on every update but the libraries do not, it prevents the user from having to reload the entire bundle on an update. It's set up here.

[d2fong]

TODO:

• [ ] remove unnecessary lodash dependencies
• [ ] extract jquery ui autocomplete bundle into its own package that is compatible with nodejs require style modules
• [ ] send the browserslist field in package.json to the .babelrc file

[d2fong]

I don't know why lodash says it takes up that much because we do install only the modules we need. That said, we could just implement the functions ourselves. I also found a couple of functions that we import into the bundle but dont' actually use so I can remove those.

I can try feeding in the browserlist field from package.json into the bablerc file to see if it removes code included from core.js