Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reduce js bundle size #48

Open
dwitvliet opened this issue May 28, 2020 · 4 comments
Open

Reduce js bundle size #48

dwitvliet opened this issue May 28, 2020 · 4 comments
Labels
Improvement Improvement to existing functionality

Comments

@dwitvliet
Copy link
Collaborator

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

@dwitvliet dwitvliet added the Improvement Improvement to existing functionality label May 28, 2020
@d2fong
Copy link
Collaborator

d2fong commented Jul 7, 2020

@dwitvliet
Here is what the bundle looks like:
Screen Shot 2020-07-07 at 5 58 29 PM

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:
Screen Shot 2020-07-07 at 6 17 37 PM

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

Let me know what you think about these ideas.

@dwitvliet
Copy link
Collaborator Author

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
Copy link
Collaborator

d2fong commented Jul 15, 2020

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
Copy link
Collaborator

d2fong commented Jul 15, 2020

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

d2fong added a commit that referenced this issue Jul 15, 2020
…if the network elements objects are empty.

refs #48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Improvement Improvement to existing functionality
Projects
None yet
Development

No branches or pull requests

2 participants