How to Improve Performance of Fiori Application using Grunt and Google Closure in SAP WEB IDE and SAP WEB IDE Full-Stack

[former_member188432]

Objective of the blog:

As we all know when we ran the Fiori project with help of Component.js file.

• It took long time to download all the required files into client system.

We can improve performance by using GRUNT which is coming under SAP Web IDE Full-Stack.

With help of grunt , we can create our Component-preload.js , which is minified version of our all files like view , controller into a single file.

But , if we notice carefully we could identify the documentation of our *.js files did not remove by grunt.

So, we could take help of Google Closure Rest API to minify our individual files. And then generate our Component-preload.js file with help of Grunt.

Lets, Start.

Now we have to create a feature project to call Google Closure.

In SAP Web IDE, we can follow the below process:

File -> New -> Project From Template.

Then, we should select the Category : Feature and Template : SAP Web IDE Feature

And then provide project name as : googleclosureminification

Now we have to provide below details

Feature Details:

Feature Name : googleclosureminificationfeature

Feature Description: Google Closure Minification Feature

Plugin Details:

Plugin Name : googleclosureplugin

Plugin Description : Google Closure Plugin

And do not select the check box of sample code.

Now our project structure would be like as below:



Now open the node googleclosureminifcationplugin and then create a Command.js file under command folder as below:



Now we have to include below code into Command.js file.

define({

	execute: function() {

		this.href = "https://closure-compiler.appspot.com/home";

		window.open(this.href, "_blank");

	},



	isAvailable: function() {

		return true;

	},



	isEnabled: function() {

		return true;

	}

});

Now open the i18n files from below location and do the below code:



Now open plugin.json file and do the below code:

{

	"name": "googleclosureminificationplugin",

	"description": "Google Closure Minification Plugin",

	"i18n": "googleclosureminificationplugin/i18n/i18n",

	"requires": {

		"services": [

			"usernotification",

			"log",

			"command",

			"commandGroup"

		]

	},

	"provides": {

		"services": {

			"minification": {}

		},



		"interfaces": {}

	},

	"configures": {

		"services": {

			"command:commands": [{

				"id": "googleclosureminificationplugin.googleHome",

				"label": "{i18n>command_googlehome}",

				"service": "googleclosureminificationplugin/command/Command"

			}],



			"commandGroup:groups": [{

				"id": "repositoryBrowserContextMenu.minification",

				"label": "{i18n>commandgroup_minification}"

			}, {

				"id": "repositoryBrowserContextMenu.minification.googleclosure"

			}],



			"commandGroup:items": [{

				"parent": "repositoryBrowserContextMenu",

				"type": "menu",

				"group": "repositoryBrowserContextMenu.minification",

				"prio": 100

			}, {

				"parent": "repositoryBrowserContextMenu.minification",

				"type": "inline",

				"group": "repositoryBrowserContextMenu.minification.googleclosure",

				"prio": 10

			}, {

				"parent": "repositoryBrowserContextMenu.minification.googleclosure",

				"type": "action",

				"command": "googleclosureminificationplugin.googleHome",

				"prio": 10

			}]

		}

	},



	"subscribes": {}

}

Now deploy the project into SAP Cloud Platform.

After deployment, we should create a destination for the application URL which was generated during deployment.



Now, we have to activate the new plugin from the SAP Web IDE.



After activation, we should get like as below:



If we execute the Google Closure Home, it would open the google closure as below, where we can modify our files for minification.



Now we have to create a simple Fiori project. In our case we have created a project like below:



Now, copy the code and paste into the editor (Google Closure UI) and select option , which type of build we require. And then press compile button, the minified file would get displayed. Copy the new code (minified version) and paste into the desired *.js file.

For e.g: Copy the code of component.js and do the minification.



After doing the above activity, where we have all the minified *.js files.

Now we will create Component-prelod.js file using GRUNT.

Now export the project ( minified project, where all the *.js files transferred into minified version.)

Now import the project into SAP Web IDE Full-stack after importing the project we have to create Gruntfile.js and package.json as below:



Now we have to include below code into Gruntfile.js

module.exports = function(grunt) {

  'use strict';

  grunt.loadNpmTasks('@sap/grunt-sapui5-bestpractice-build');

  grunt.registerTask('default', [

      'lint',

      'clean',

      'build'

  ]);

};

Now we have to include below code into package.json

{

  "name": "grunt-build",

  "version": "0.0.1",

  "description": "Grunt build",

  "private": true,

  "devDependencies": {

      "@sap/grunt-sapui5-bestpractice-build": "1.3.33"

   }

}

Now right click on the Fiori project , we will get Build option as below:



Now press the Build option and open the console of SAP Web IDE as below, where we could see the progress information.



Now we have to open the newly created folder dist of our project. And we could get Component-preload.js as below where all the desired files club together as below:



Now run our newly created Component-preload.js file and open the network tab of debug as below and we could see only the Component-preload.js get loaded only no other controller or view.



We could see the it took only 200ms to load the file.



We could follow the above approach to faster our Fiori application.