Component-preload.js generation

Question

we are about to close a SAPUI5 application, one of the last steps is to make a Component-Preload.js file to improve performance. I read different guides around

Answer 1

There are several main ways of doing it.

1. You can use SAP Web IDE to generate it. This assumes that you are using WebIDE to develop your application (which is not true based on your question). The regular version of WebIDE generates this file during the "client build" just before application deployment.

2. The "multi cloud" version of WebIDE can use a grunt build to do it. You can find more info here if you are interested: https://www.sap.com/developer/tutorials/webide-grunt-basic.html.

3. Use the new UI5 command line tools (https://npmjs.com/package/@ui5/cli):

   • Run npm i -g @ui5/cli to install the tools globally.
   • Open the root of your project with your terminal.
   • Run ui5 build preload to build the preload.

4. Use the @sap/grunt-sapui5-bestpractice-build pre-configured grunt tasks. The downside is that they are more-or-less black boxes which do not allow that much customisation. You can find an example setup on SAP's GitHub repository jenkins-pipelines. In a nutshell:

   • You need to define an .npmrc file which adds the @sap npm registry: @sap:registry=https://npm.sap.com.
   • Run a npm init command such that you generate a package.json file. This file describes your application and your dependencies (runtime dependencies and dev dependencies; you will only have dev dependencies for now, as you just want to build your app). Make sure to mark the package as private. See the npm docu (at the end of the license chapter).
   • Then you can install grunt and the build configuration: npm i grunt -D and npm i @sap/grunt-sapui5-bestpractice-build -D.
   • Lastly you need to define a simple Gruntfile (you can then run the build by just running grunt):

module.exports = function (grunt) {
    'use strict';
    grunt.loadNpmTasks('@sap/grunt-sapui5-bestpractice-build');

    grunt.registerTask('default', [
        'lint',
        'clean',
        'build'
    ]);
};

5. You can use the official grunt_openui5 plugin to generate the preload file(s). In order to be able to do this, you need to have node installed:

   • Create a package.json (e.g. through npm init).
   • Install grunt by writting in the console: npm install grunt-cli --save-dev.
   • Install the official openui5 grunt plugin: npm install grunt-openui5 --save-dev.
   • Now you have all the tools necessary, you just need to tell grunt what it has to do. You should create a Gruntfile.js in the root of your project. In this file you should configure the grunt openui5 task as described in the official github page (I linked it above). You can find a similar file here (it has more build steps like minification and copying the result files in a separate directory).
   • You can then run the grunt build by simply running grunt in the console. If you registered your build task as the grunt default task (like in the sample file: grunt.registerTask('default', [...]);) then you just have to write grunt.
   • I think you should be able to integrate such a command line script (i.e. to run grunt) inside your IDE as an external tool.
6. You can use the unofficial gulp-openui5 tool to generate it. I would not recommend this if you are not already using gulp for your builds (as it is not a tool built by SAP). The procedure is the same, but using gulp for building the app instead of grunt (so you need to install node, npm init, install gulp, create the Gulpfile, etc).

Note that for most of the above methods, you need nodejs, which you can download and install from here: https://nodejs.org/en/download/.