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

Make the geppetto-client common chunks lightweight #23

Open
3 tasks
ddelpiano opened this issue Jun 11, 2019 · 3 comments
Open
3 tasks

Make the geppetto-client common chunks lightweight #23

ddelpiano opened this issue Jun 11, 2019 · 3 comments
Assignees
Labels
documentation enhancement New feature or request

Comments

@ddelpiano
Copy link
Contributor

ddelpiano commented Jun 11, 2019

Regardless of the application that is using the geppetto-client, make the common chunks that are downloaded at the start very lightweight.

  • Do an inventory of Geppetto components, delete what is obsolete (assigned to @ddelpiano and @filippomc ).
  • Do a dependency analysis of what we have now and identify what is using up the space and make it so that those things are either removed or lazy loaded (assigned to @rodriguez-facundo ).
  • Remove jQuery UI (500KB just this) (not assigned yet, Facu/Dario/Filippo will synch together on this once the first 2 tasks are done to see who can allocate bandwidth on this).
@rodriguez-facundo
Copy link
Member

Screenshot 2019-09-12 at 12 08 04 PM

Screenshot 2019-09-12 at 12 08 32 PM

@filippomc
Copy link
Contributor

That's a good starting point, we could concentrate on everything bigger than a threshold and think about the following:

  1. What dependencies can be eliminated because we can remove the component introducing it
  2. What dependencies can be eliminated by refactoring the component using the dependency we consider obsolete (e.g. jQuery)
  3. what must be loaded at bootstrap no matter what the application is doing (why we are loading all those components in the main bundle?)
  4. what is loaded because the application is using components which have specific requirements (e.g. three) @rodriguez-facundo are these dependencies coming from a empty geppetto-application or there's some component which is explicitly imported?
  5. What parts can be reduced by exploiting modularity (change the imports in order to take only the necessary modules)
  6. what dependencies can be lazy loaded (Suspance, Lazy)

Nice reading: https://medium.com/a-young-devoloper/analyzing-and-reducing-react-bundle-size-bb2d2577b22a

@afonsobspinto
Copy link
Member

Besides everything aforementioned one interesting strategy to check is the use of compression-webpack-plugin:
Here are some of the measures resulted of my experiences with that:

bundle / size / time / time with network restrictions

Uncompressed Dev :
main bundle: 6.3MB / 265 ms / 2.9 min
common bundle: 1.8MB / 215 ms / 1.3 min

Compressed Dev :
main bundle: 1.3 MB / 493 ms / 39.07 s
common bundle: 484 KB / 203 ms / 21.35 s

Uncompressed Prod / https://live.geppetto.org/ :
main bundle: 1.4MB / 1.95 s / N/A
common bundle: 404kb / 730 ms / N/A

Compressed Prod :
main bundle: 722 KiB / Not Tested
common bundle: 312 KiB / Not Tested

The measures were taken from the Hodgkin-Huxley NEURON simulation.
Branch with the changes https://github.com/openworm/geppetto-application/tree/feature/23_geppetto_client

Next steps:

  • Activate compression in Virgo?
  • Use Brotli compression instead of Gzip?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants