Skip to Content
Author's profile photo Sanket Chimalwar

How to create component-preload.js in easy steps

I had issues creating component-preload.js file for my SAPUI5 application project. I am not describing what component-preload.js file is as there are already many post for that. I would keep this to on “How to create component-preload.js File” in some easy steps. The following steps were done on a windows machine.

1. First you need to install the Node.js on your system. Download the exe file and run it like any other software installation.

2. Now install gulp with the following command on the command prompt. This can be done on the project workspace folder ( webcontent ) also.

    npm install –save gulp-install


      More details can be found here gulp-install

3. Once you have gulp installed, you need to install the following gulp plugins. Enter the following commands at the command prompt.

    npm install –save-dev gulp-ui5-preload


    npm install –save-dev gulp-uglify


  npm install –save-dev gulp-if


4. Create a new file gulpfile.js in the same folder where the component.js file resides ( webcontent ) – check attachments

5. Now replace the “yournamespace” in the gulpfile.js with your project name.

6. Run the following command in the command promp to generate the component-preload.js file. This should be in the folder where you have the component.js file.

    gulp ui5preload

      After successful execution of the command you can the following


   If you get any error at this command try all the previous steps here in the same folder.


Share your file using eclipse tool with the ABAP system.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      There are already a couple of blogs and topics about how to create a component-preload.js file:

      How to build Component-preload.js for Fiori like custom apps

      Performance Improvement with Component-preload.js

      and even the official docs on SAP/grunt-openui5 · GitHub mention it

      Author's profile photo Sanket Chimalwar
      Sanket Chimalwar
      Blog Post Author

      Hi Robin,

      You are correct and i faced some problems while executing these steps. I had to refer a couple of other blogs to solve my issues. I just tried to bring all at one place and put it together. Till last week i was not aware of the "grunt" word. I tried to mention all those steps in a simple way so that even a layman can try to execute it. Hopefully it solves the purpose . 🙂



      Author's profile photo Sung-Yen Yang
      Sung-Yen Yang

      Hi Sanket,

      Thanks for sharing your experience on SCN with us.

      I followed your steps to generate my Component-preload.js, but unfortunatelly failed.

      But, eventually I still figured out the root-cause and generated the file.

      I want to share how I solved my problem at here for you and others.

      • my environment doesn't have gulp, so I entered "npm install gulp" in my UI5 project folder to have gulp.cmd.
      • these node modules are installed under my UI5 project folder. I need to switch to ".bin" folder in "node_modules" folder to execute gulp command.
      • I executed "glup ui5preload", but got following error dump.

        throw er; // Unhandled 'error' event
        at new JS_Parse_Error (/Users/bv...

      • After google for awhile, I realized I need to revise following bold text part in the gulpfile.js and then I got a Component-preload.js for my project.




          return gulp.src(








      Author's profile photo LAN XIAO
      LAN XIAO

      i got same problem like you,  then i followed you and my problem was solved,i found that requests is decreased, but i didn't see a huge promotion when loading app. 😥

      Author's profile photo Niranjankumar Ramamoorthy
      Niranjankumar Ramamoorthy


      Could anyone give me the sample file 'glupfile.js' ?

      I am not finding the attachment in this post

      Thanks in advance