Improving MapStore Performances

[tdipisa]

Description

MapStore need to be improved in order to optimize some loading performances and functional behaviors.
We should take into account PageSpeed Insights hints to optimize performance and verify at the end the effective improvement. The list below comes from a preliminary analysis of PageSpeed Insights and this Epic collects the main involved points of interest:

• MS bundle: the bundle of MS need to be reduced, the issue Investigated on bundle sizes( too high) and memory usage during build #4297 provides a recent reports of currently used libraries. Action here are:

  • ogc-schemas: GetCapabilites parsing error for inspire_vs:ExtendedCapabilities #6489 is the biggest library (4.21 MB (11.8%)) and it is currently used mainly for some specific purposes like CSW requests and parsing of CSW results. It would be useful to remove this dependency by replacing it with a proprietary solution in MS (estimate for this are ~5/8 pts). This library, together with pdfjs and shpjs anyway is loaded dynamically, therefore should not affect the initial load of the bundle. We have to verify if it is imported somewhere else in the code.

  • Review of dependencies: the whole list of dependencies need to be analized to check if something can be excluded (clean up of unused/old dependencies).

• Mapping Libraries: by default MS uses Leaflet for mobile and OL for desktop (Cesium is an option). Mapping libraries should be loaded only when needed depending on the used device. This means that we can avoid loading OL in Mobile devices and Leaflet in Desktop if not specifically configured. At the same time Cesium JS should not be loaded if the plugin is not enabled in configuration. This point also involves the MS bundle, because Investigated on bundle sizes( too high) and memory usage during build #4297 reports also part of the bundle that currently include some OL and Leaflet scripts (is the report considering dynamic dependencies?). We should split the bundle also per mapping libraries if needed.

• Other dependencies loading: a lazy loading of scripts should be implemented to load only needed dependencies related to the application context in use (home/viewer/dashboard/stories). This means to properly split the bundle according to required functional behaviors. For example I don't need to load viewer scripts if I'm loading the home page.

• Home Page Loading: the loading of the MS's landing page can be improved also in other terms. Currently all first pages of resource categories (Maps, Dashboards, Stories) are loaded at the same time: by default only the list of Maps should be retrieved from the backend and the other should be loaded only if visualized.

• CDN: at the release we can evaluate to speed-up script loading by deploying and getting the new release bundles from a CDN.

What kind of improvement you want to add? (check one with "x", remove the others)

• Minor changes to existing features
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Other... Please describe:

Other useful information

Consider that MS already implements some lazy loading of scripts; therefore existing mechanisms, currently used for specific piece of the framework, can be extend to the entire application.
For each of the above point we can create a separate issue to connect to this epic.

### Tasks
- [ ] https://github.com/geosolutions-it/MapStore2/issues/6735
- [ ] https://github.com/geosolutions-it/MapStore2/issues/9237
- [ ] https://github.com/geosolutions-it/MapStore2/issues/5628
- [ ] https://github.com/geosolutions-it/MapStore2/issues/9426
- [ ] https://github.com/geosolutions-it/MapStore2/issues/6489

[mbarto]

A quick report on reducing initial js loading. Playing with dynamic splitting of pages and plugins this is what we can get.

This is the current loading of js files for the homepage.

This is the after code splitting.

Instead of 2.5Mb we download about 782kb.

Moreover the code that is not red boxed can be removed from initial loading, because it's not needed by the homepage. So 782kb could be the complete payload for js code.

The experiment code is here: https://github.com/mbarto/MapStore2/tree/split_pages

[mbarto]

Some stats about home page loading payloads:

Type of Resource	Size
JS	3590Kb
IMG	1300Kb
CSS	125Kb
Font	63Kb
XHR	44Kb
HTML	21Kb

[tdipisa]

Thank you @mbarto, let's discuss this in a meeting.

[tdipisa]

As a first step, we agreed to move on with the following:

• Mapping Libraries
• Other dependencies loading
• Home Page Loading

[srtonz]

Just subscribing here as we're very interested in seeing improvements on this issue and #4297 - let me know if there's anything you need help with

[offtherailz]

Added an improvement to increase general rendering performances, see #5133
This should improve general responsiveness of the application on tile loading and when, in general, many redux actions are emitted frequently.