Problem

The initial loading of the JS and CSS files of translate5 need to be speed up by combining and minifying those files.

Also the usage of a CDN should be evaluated.

Solution

Introduce bash script that will use puppeteer to imitate load of UI by user.

In process we will collect sequence of used ext classes. This is crucial as order of class definition plays big role for Ext app to run.

After queue of js files is collected we will separate them to general App and plugin code.

Then we will concat and minify general App code into 1 file and every plugin code into separate files.

We also will have to redo some localisation logic to fit new js serving logic.

In development mode everything will work as previously.
In prod mode minified files will be served where possible and those that are missing (new plugins, some role based classes, etc) will be loaded with Ext loader as in dev mode.

Usage

Docker repo now has node service.

1. create auth token 't5 auth:imp {}user_login*{*}'
2. assert that translate5 in development mode
3. in docker folder (the one where docker-compose.yml file is) trigger:
   docker compose run node sh build_js.sh

1. For "Please enter url to translate5 http://php/editor" provide different url only if you setup your docker network differently
2. For "User auth token. Choose role with max permissions (like sys-admin): " provide token from p.1
3. Result should be "app.min.js" in main repo and specific "*.min.js" file in each plugin that has UI logic
4. once version file provided and App switches to prod mode - UI should load much faster