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
Previous
Next Post »

2 comments

Click here for comments
Anonymous
admin
25 July 2017 at 08:53 ×

It does not work.

Reply
avatar
Georgina95
admin
6 November 2020 at 01:17 ×

Hi,

I also encountered an error upon running the gulp task. I thought maybe I am running the task in the wrong folder, but this was the only place where it found the gulfile.js. I tried moving around that as well with no luck. Any idea what I did wrong?

[...]\workspace_mars\ProductConfig\WebContent>gulp ui5preload
[09:05:19] Using gulpfile ~\workspace_mars\ProductConfig\WebContent\gulpfile.js
[09:05:19] Starting 'ui5preload'...
[09:05:22] 'ui5preload' errored after 3.46 s
[09:05:22] GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Name expected
File: [...]\workspace_mars\ProductConfig\WebContent\node_modules\merge-stream\index.js
Line: 3
Col: 6

Reply
avatar