neherlab / covid19_scenarios

Models of COVID-19 outbreak trajectories and hospital demand
https://covid19-scenarios.org
MIT License
1.36k stars 352 forks source link

Improve load times with preload/prefetch #645

Open ivan-aksamentov opened 4 years ago

ivan-aksamentov commented 4 years ago

šŸ™‹ Feature Request

šŸ”¦ Context

Currently all the bundled resources are loaded sequentially on page load. Additionally, clicking "Run" triggers downloading the webworker script before actual run happens.

Bundling is suboptimal and code-splitting is currently only on page-level. It does make sense for many applications, but for scenarios, we basically only have 1 page + a bunch of small pages nobody ever looks at.

šŸ˜Æ Describe the feature

Resource loading should be made smarter, and related resources can be fetched in parallel or merged together in webpack. There is no need to wait user actions in order to download some of the resources.

Code splitting should be done at component level and some components should be loaded before others. For example, navbar and the form can go early, while line plot and hidden modal windows can wait a few moments.

šŸ’» Examples

šŸ’ Possible Solution

Play wit Lighthouse, chrome dev tools and other profilers and make the app more responsive, using prefetch/preload and other resource priority functionalities of modern browsers.

Requires good understanding of webpack.

Additional bonus points for bundle and code-splitting revision and creative non=breaking solutions.

Related

-