How to remove component-preload.js error/ How to optimize sapui5/fiori application

How to remove component-preload.js error/ How to optimize sapui5/fiori application

Problem

When applications run locally, on a computer with lightning-fast read speeds from the disk, the performance impact is negligible. However, when web applications need to be loaded into the browser there is a noticeable difference in speed between downloading a single large file and downloading many smaller files.

Solution

One of the way to remove the error is by just making a simple file named as Component-preload.js in the project directory. This would remove the error, but it’s not the correct way to handle the error. Since it doesn’t really does the purpose of component-preload.js file, ie. Optimizing the project.

In order to improve loading performance, we need to package the Javascript files in a way that allows us to only send one file to the browser that contains all of the code. SAP packages their UI5 libraries into single files called "preloads". This same method can be used for the application code of UI5 apps. In order to make the packaging step as quick as possible we will use a Javascript task runner.

Tools Required

Automated build steps for Javascript projects are quite popular these days and projects like Grunt and Gulp are the leading Javascript task runners.
In this example we are going to be using Gulp and specifically the gulp-ui5-preload plugin.

Prerequisites

Before we can use Gulp, we first have to install Node.js and npm on the system.
Node.js can be downloaded for Windows and OS X from https://www.npmjs.com. npm is bundled with the Node.js installer and there is no need to install it separately.

We are now ready to install gulp. Type the following command on the command line

npm install gulp -g

npm install gulp-ui5-preload -g

npm install gulp-uglify -g

npm install gulp-if -g

Script

Once this is done create a new file named gulpfile.js in the root of your project (the same folder as your Component.js):

var gulp = require('gulp');

gulp.task('default', function() {

// place code for your default task here

});

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

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

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

gulp.task('ui5preload', function() {

return gulp.src(

[ '**/**.+(js|xml)', '!Component-preload.js', '!gulpfile.js',

'!model/metadata.xml' ]).pipe(gulpif('**/*.js', uglify())) //only pass .js files to uglify

.pipe(ui5preload({

base : '.',

namespace : 'YourNamespace'

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

})

Replace the YourNamespace text with your project's namespace.

Executing the Code

In the project root directory execute the following command:

gulp ui5preload

You should see an output similar to the following if it was successful:

[13:34:21] Using gulpfile ~/project/code/src/gulpfile.js

[13:34:21] Starting 'ui5preload'...

[13:34:22] gulp-ui5-preload number of files combined to preload file Component-preload.js:  43

[13:34:22] Finished 'ui5preload' after 1.5 s

In your project root folder you should now see a file named Component-preload.js. In order to utilize this preload, you have to initialize your UI5 project with the data-sap-ui-preload="sync" attribute. Here is an example of this:

<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.unified"

data-sap-ui-theme="sap_bluecrystal"

data-sap-ui-xx-bindingSyntax="complex"

data-sap-ui-resourceroots='{"YourNamespace": "./"}'

data-sap-ui-preload="sync">

</script>

To prove that the web browser is using our Component-preload.js file, here is a screenshot of the Chrome debugging tools as the app loads:

By loading the Javascript assets into the browser using a preload we are greatly reducing the number of individual files that have to be retrieved from the server and reducing the loading time, especially at high latencies.

For any queries comment down or just write to me at thomasanjo@gmail.com

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post