Component-preload.js,Minification and Uglification For Enhancing The Performance Of SAPUI5 application

[suman_kumar16]

In this blog, we'll look at the use of building, Component-preload.js, minification, and uglification for enhancing the performance of application.

SAPUI5 applications are build with the MVC pattern and therefore consist of multiple files, like views or controllers, With fragments, it's possible to split up parts of views even further into smaller logical units.

Although having a lot of difference files based on their functionality is good during the development, it's bad when running on a production server. Every necessary file fires a separate network request. You have to wait until all network requests are completed before the app is usable. you may not notice this delay in your corporate network[which is not in my case 😄 😄 :P], but you'd notice in on a mobile phone with a moderate connection speed.

To solve this issue, you can package different files into a single file, a process called bundling. through bundling, your app only has to load a single file instead of all the separate files, which speeds up the loading time of your application because your app has to wait only for a single file to load.

In SAPUI5, this single file is called Component-preload.js . this file contains all the code of your application in a minified version. Minification means removing all unnecessary white-space and comments, Which also decreases the file size. In addition, the javascript source code is also uglified. Ugification means that your source code will not be as readable as before.

 

Minification via a Grunt Task Runner

You can minify your SAPUI5 application source code via a Grunt task. The Grunt task is called openui5_preload is in Node Package Manager(NPM) called grunt-openui5. 

Grunt is a task runner based on node.js. A task runner can run certain tasks, like linting, minification, bundling, executing unit tests. The idea behind a task runner is to automate repetitive work.

 

Node.js Setup

Setting up Node.js is pretty straightforward:

1. Navigate to https://nodejs.org/ and download Node.js


2. Follow the installer instructions. You can test the installation by opening your "Node.js command prompt" {not the usual cmd one ;)}

*NPM is installed automatically with Node.js*

Grunt Setup

Now you can install Grunt command-line tool NPM package globally( -g parameter stands for globally) from the command line by typing the following:

npm install -g grunt-cli

after running the install command, you should see a similar output as that shown below. That completes the Node.js and Grunt setup.



Now that you know about the Grunt task runner and Node.js, let's dive into an example to see the task in action.

Create Gruntfile.js and package.json manually by right clicking on the project name .

The structure of the application is shown below also note the Gruntfile.js and package.json files.

Gruntfile.js contains the task for minifying the SAPUI5 application, and package.json contains all the required modules.

 



when you run the this application and look at Google Chrome's NETWORK tab, you'll see that app-salarycard files requested separately.



 

Gruntfile.js

Now let's look at Gruntfile.js

 





Inside grunt.initConfig is one configuration object, dir, which refers to the name of the webapp(i.e. Projectname- Salarycard) and the name of the destination folder, dist . Then there are three tasks:Copy, clean, and openui5_preload. The copy  task is responsible for copying all the files to the dist folder.The clean task removes all the files inside the dist  folder.

The actual minification of the SAPUI5 application happens inside openui5_preload . To configure the task, you need to provide the namespace of the application with the prefix setting and the component with the components setting. The cwd property defines the root directory of your application.

In src  we have listed all the default settings . When you want to include additional files or exclude certain files, you have to set the src property and list all your desired settings.If you use the src property, the default settings of the src property will be ignored. This means that if you forget to list '**/*.view.xml', then the view files won't be minified anymore.

grunt.loadNpmTasks  loads various plugins, like grunt-contrib-clean for cleaning directories or grunt-openui5 to minify the application.Those tasks expect different configuration settings, like openui5_preload:{ . . . }, which we previously defined inside grunt,initConfig({. . . }).

At the end, you'll see grunt.registerTask. Here, we register two tasks:build and default . The default task runs when you type "grunt" inside the command line(Node.js command line).

package.json

Here is package.json file code looks like



name: <any name>

description: <free text>

author: <free text>

We have listed dependencies like grunt-openui5 or grunt-contrib-clean inside the devDependencies setting.This mean that those packages are only needed during development of the application and not when running in production mode.

Now, open the command line and switch to the Salarycard directory, Inside the command line and type "npm install" . As you can see in below screen shot all the required dependencies are installed.

Running NPM install Command:





Now, all the listed dependencies inside package.json are installed in the node_module folder, as you can see below



and check for the below files inside node_module folder, no need to go in depth



 

Running Grunt

Now, type "grunt" inside the command line to start the minification process. When you look inside your project, you'll now see the dist folder which contains the Component.preload.js file as shown below.



 

dist  folder with Component-preload.js file



Below image shows an excerpts of the Component-preload.js file, in which all the application files are listed as module and included in the minified source code.



Now, move the Component-preload.js file out of dist folder to WebContent folder of the application.

Below is the folder structure after moving the Component-preload.js file into WebContent folder.

 



 

Now, we will open Component-preload.js file to change the file path to load properly.

before change:



after change the Component-preload.js file will look like below [WebContent removed]. As we never provide the WebContent folder path anytime in our development.



If you run the application again and inspect the network trace again in Google Chrome, you'll see that Component-preload.js is loaded instead of all the separate files shown in below screen shot.



comparison Before and After :



We can observe that number of request reduced to 25 after loading of Component-preload.js file.

Now, we may delete all the un-necessary files/folders like Gruntfile.js, package.json, node_module, dist . {at this point these files are not required anymore because we have achieved our motive i.e. minifing the files}.

Note: if you change any source code in the file you need to run the "grunt" command again to minify the source code again otherwise it won't work properly.

 

How To Debug The Application After Minification and Uglification

As we had noticed that after loading of Component-preload.js file our Views, controllers files are not visible anymore in Network trace. So don't worry there is always a way for the developers :).

We need to add a parameter to the application url i.e. sap-ui-debug=true which will load all the minified files into the Network tab in readable format.



Here we can see our files



Method-2:

You can switch off the Component-preload.js file loading by addling the URL parameter "sap-ui-xx-componentPreload=off"

i.e.:- "http://localhost:8080/Salarycard/index.html?sap-ui-xx-componentPreload=off"

That's all on Componet-preload.js, minification and uglification, Hope you enjoyed this blog.

 

***IMPORTANT

Once we Share the application to ABAP server we need to provide a BSP application name starts with "Z" ,  And the Component-preload.js file will look like below, A file name with 44 characters will be created.



As we have created a brand new BSP application , So the file path won't work anymore in Component-preload.js file, If you run the BSP application you can still observe the Component.preload.js file loads correctly but along with that all other files like *.view.xml, *.controller.js, *.json etc loads which was't our requirement, So to avoid this conflict it's always better to create a BSP application starts with "Z" in ABAP server (ZDEMOSALCAD) and create a project in eclipse with the exact name as BSP application to avoid this conflict in future.

(Thanks to my colleague Sanika for this information) 

For example

Create a BSP Application name : ZDEMOSALCAD

Then create Eclipse Project Name with the exact same name : ZDEMOSALCAD

 

 

Thanks & regards,

Suman Kumar Panigrahi