Make the geppetto-client common chunks lightweight

openworm / geppetto-client

The web client of a Geppetto application

Other

4 stars 2 forks source link

Make the geppetto-client common chunks lightweight #23

Open ddelpiano opened 5 years ago

ddelpiano commented 5 years ago

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 commented 5 years ago

filippomc commented 5 years ago

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

What dependencies can be eliminated because we can remove the component introducing it
What dependencies can be eliminated by refactoring the component using the dependency we consider obsolete (e.g. jQuery)
what must be loaded at bootstrap no matter what the application is doing (why we are loading all those components in the main bundle?)
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?
What parts can be reduced by exploiting modularity (change the imports in order to take only the necessary modules)
what dependencies can be lazy loaded (Suspance, Lazy)

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

afonsobspinto commented 5 years ago

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?