Improve load times with preload/prefetch

[ivan-aksamentov]

🙋 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