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
