Performance Improvement with Component-preload.js

[HPSeitz]

Performance is always very important. By using a Component-preload.js file in your custom developed Fiori App ("Build your own Fiori App in the cloud") startup and runtime performance can be improved.

 

Probably you saw already "negatively" the Component-preload.js file as failed http request in your custom developed Fiori App or if you used one of the Project Templates of the SAP Web IDE. Or perhaps you recognized it in the source of an installed standard SAP Fiori App, which you have downloaded from SAPUI5 ABAP Repository via the SAP Web IDE. The standard SAP Fiori Apps have this file included by default. To make it short this file basically contains all the JavaScript (controller, views, utilities) and XML view files of the application within one single files. So instead of multiple http request for each of the app resources, only one request is necessary. This could be a huge performance improvement if you have for example bad latency times.

 

See the number of request in the below screenshot the difference without (left) and with the usage of Component-preload.js (on the right):



 

Generate Component-preload with Gulp

Currently SAP Products lack off a ready-running build process to generate such a file. Also SAP Web IDE does not support the generation of this file (at least in the current version). I'm very curious how and when SAP will close this gap and include a build process within SAP Web IDE. Probably soon. So what can you do in the meanwhile to solve this issue?

The answer is easy. Use one of the available build tools. There is Grunt and there is Gulp among others. For both tools packages are available to generate the preload file. I choose Gulp here, because I saw the video of Eric Schoffstall presentation  MountainWest JavaScript 2014 - Build Systems The Next Generation by Eric Schoffstall - YouTube. Great show, worth seeing and also entertaining!

gulp-ui5-preload package

With Gulp we can use the very handy gulpui5-preload package from Christian Theilemann (Thx geekflyer!). I will show it with the Fiori UI5 Boilerplate (UI5BP). Please use the latest version is case you have already download the source of the UI5BP. For UI5BP and if you have node.js installed it quite simple:

 

install necessary packages via npm (npm comes with node.js, this task is only initially necessary):

npm install

and generate to Component-preload.js with Gulp:

gulp ui5preload

on success you should see something like this:


 



 

and as result you have the generated Component-preload.js file:

 



 

Be aware that you always have to rebuild the Component-preload if you made changes to one of the included files! So it makes sense to generate it, if you deploy on QA or PRODUCTION and remove it if you developing locally.

 

The base for this easy build process are the file package.json which defines the relevant package. This information is used by npm to install the necessary packages locally. And the gulpfile.js, which defines what should be added to the Component-preload.js and what not:

 

var gulp = require('gulp');

var ui5preload = require('gulp-ui5-preload');

var uglify = require('gulp-uglify');

var prettydata = require('gulp-pretty-data');

var gulpif = require('gulp-if');

gulp.task(

    'ui5preload',

    function() {

        return gulp.src(

                [

                    '**/**.+(js|xml)',

                    '!Component-preload.js',

                    '!gulpfile.js',

                    '!WEB-INF/web.xml',

                    '!model/metadata.xml',

                    '!node_modules/**',

                    '!resources/**'

                ]

            )

            .pipe(gulpif('**/*.js', uglify())) //only pass .js files to uglify

            .pipe(gulpif('**/*.xml', prettydata({type: 'minify'}))) // only pass .xml to prettydata

            .pipe(ui5preload({

                base: './',

                namespace: 'ui5bp',

                fileName: 'Component-preload.js'

            }))

            .pipe(gulp.dest('.'));

    }

)

Workaround for SAP Web IDE and HCP

If you followed the previous post and deployed the UI5BP app via SAP Web IDE to SAP HANA Cloud Platform (HCP) and on the Cloud SAP Fiori Launchpad  ( Deploy UI5 Boilerplate on Fiori Launchpad of HANA Cloud Platform ) you can generate the Component-preload.js with this workaround:

Step 1: As the SAPUI5/OpenUI5 App is deployed on the Git Repo on HCP checkout/clone the repo locally with Git. You find the Git Repository URL in HCP Cockpit under the following location:





Step 2: generate the Component-preload.js with Gulp:

npm install

gulp ui5preload

Step 3: Add, Commit and Push to HCP Git Repo

git add Component-preload.js

git commit -m "generate Component-prekiad.js"

git push

Step 4: Create and activate a new version of application in HCP Cockpit

This is a two step process. You create a new version go the just push source and in a second step activate this version. The result should look like this:



Now the Fiori App, here Fiori UI5BP is using the Component-preload.js.

 

Usage of Grunt

For Grunt there is also a task available. Have a look at SAP/grunt-openui5 · GitHub

and the post from Matthias Osswald http://scn.sap.com/community/developer-center/front-end/blog/2015/02/18/optimizing-openui5-apps