On the fly preload bundle generation

Expected Behavior

ui5-server should be able to generate library-preload.js and Component-preload.js bundles on the fly. This should speed up overall loading time of a served project in the browser. In addition, this should allow for proper performance testing during development by simulating the resource structure available in the production environment.

This should be controllable with one or more feature flags. It might make sense to influence which projects are being optimized. Possibly only those not being actively developed/changed.

Current Behavior

As the OpenUI5 npm dependencies do not contain any preload bundles, currently all required resources are loaded with single requests.

Steps to reproduce the issue

Setup the openui5-sample-app
Execute ui5 serve -o
Check browser network trace for lots of requests and long overall loading time

Context

OS/Platform: all
Node.js Version: all
npm Version: all
Browser (if relevant): all

Affected components

Hello RandomByte, I worked locally in the issue for a personal project. The load times for me (average notebook, windows) were huge. I got the behavior I wanted for the dependencies I use, but it is not the same as having it on the fly.

After learning that the tooling provide the libraries locally (great idea), my idea was to generate the library preload after they are installed. So instead of packing them on the fly they happen only at first usage.

I will share the changes I did, for sure it is a rookie approach to the issue, but I think it makes sense, since it bundles only once after ui5 cli installs the dependency library and then can be shared across projects.

Modified Installer.js (@ui5/project/lib/ui5Framework/npm) under async insallPackage to add a lightweight dev build step .

       if (!installed) {
                        await this._registry.extractPackage(pkgName, version, targetDir);
                    let namespace = pkgName.replace('@openui5/','').replace('@sapui5/','');
                    let conf = {
                        path : targetDir,
                        dependencies: [],
                        type: 'library',
                        metadata: {
                            name: namespace,    
                            namespace: namespace
                        },
                        builder: {
                            resources: {
                                excludes: ["**/test/**", "**/localService/**", "**.zip"]
                            }
                        },
                        kind: 'project',
                        resources: {
                            configuration: {
                                paths: [
                                    { src: './src/' + pkgName.replace(".","/") },

                                ],
                                propertiesFileSourceEncoding: 'UTF-8'
                            },
                            pathMappings: { '/resources/' : '/src' }
                        }
                    };
                    await builder.build({
                        tree: conf,
                        destPath: targetDir,
                        buildDependencies: false,
                        dev: true,
                        includedTasks: ["generateLibraryPreload"],
                        excludedTasks: ["buildThemes"]
                    });
...

Modified LibraryFormatter.js (@ui5/builder/lib/types/library) under async format to map resources to the resources folder generated by the build

        log.verbose("Formatting library project %s...", project.metadata.name);
        project.resources.pathMappings = {
            "/resources/": project.resources.configuration.paths.preload
        };

Modified LibraryFormatter.js under async validate to add the path to the resources from the build

            if (!project.resources.configuration.paths.preload) {
                project.resources.configuration.paths.preload = "/resources";
            }

And that is it. I hit problems with sap.ui.core (I think the build options need files in test folder), and my modifications are working for libs only.

Hope this helps somehow.

Best regards, xinitrc86

SAP / ui5-tooling