Skip to Content
Author's profile photo Enric Castella Gonzalez

Accelerate your UI5 application with component-preload minified

Hi,

After working on a project where the connectivity of the pc was not desirable, we came to the conclusion that we needed something more than the component-preload to minimize the load of the application.

In this sense, we decided to minimize the size of the code to load, we conclude that we should generate files with GULP through the minification.

You can generate the component-preloadjs file by following these steps:

https://github.com/enric11/OpenUI5compiler

We added here the steps that we can find also in the github wiki:

Install

  1. Install the last version of node.js node.js
  2. Download files package.json and gulpfile.js Master branch
  3. Copy this files into your project into WebContent folder

Step 3

  1. Configure eclipse to discard node packages when sumbit files to SAP Gateway in “Windows” > “References” > “Team” > “Ignored Resources” and add “node_modules”

Step 4

  1. Install gulp dependencies with package.json

Step 5

  1. Prepare gulpfile.js for your project. You need to change name of project in gulpfile with your name of project in index.html:

Step 5

After these stepts you will have a new folder called node_modules, so, the project are ready to generate component-preload.js.

2. Generate Component preload.js

To generate component-preload.js file with task minify js, you only have to execute the task of gulp with the right button of your mouse.

Generate with: "Run As" > "Gulp Task"

A few seconds later we have our file 🙂

results

 

And we already have our application minimized 😉

 

For more information *https://www.npmjs.com/package/gulp-minify

Assigned tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Sounds great! So how can I make a preload file for my UI5 app?

      Author's profile photo Enric Castella Gonzalez
      Enric Castella Gonzalez
      Blog Post Author

      You only need this tutorial ?

      Author's profile photo Former Member
      Former Member

      Great tutorial! Thanks.

       

      Author's profile photo Former Member
      Former Member

      Hello Enric Castella Gonzalez
      I got error when running step 5 - Install gulp dependencies with package.json

      17447 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
      17448 error node v6.9.3
      17449 error npm v3.10.10
      17450 error code ENOGIT
      17451 error not found: git
      17452 error Failed using git.
      17452 error This is most likely not a problem with npm itself.
      17452 error Please check if you have git installed and in your PATH.
      17453 verbose exit [ 1, true ]

      Does this mean I have to install GIT?

      Thank you.

      Tri

      Author's profile photo Enric Castella Gonzalez
      Enric Castella Gonzalez
      Blog Post Author

      If you use Windows is not necessary install git. But some times you need to configure git path.

      Please check the solution mentioned in the follow post:

      https://stackoverflow.com/questions/26620312/installing-git-in-path-with-github-client-for-windows

       

      Best regards

      Author's profile photo Former Member
      Former Member

      Struck in

      2. Generate Component preload.js

      Found this error in console:

      /bin/bash: line 1: gulp: command not found

      Hope someone helps.

      Author's profile photo Enric Castella Gonzalez
      Enric Castella Gonzalez
      Blog Post Author

      Hi!

       

      It is possible that you run command as administrator.

      Check this link https://stackoverflow.com/questions/40390887/gulp-command-not-found

       

      Author's profile photo Gregor Wolf
      Gregor Wolf

      Hi Enric,

      are you aware of the SAP supported build using Grunt? https://www.sap.com/developer/tutorials/webide-grunt-basic.html

      Best regards
      Gregor

      Author's profile photo Enric Castella Gonzalez
      Enric Castella Gonzalez
      Blog Post Author

      Thanks for the input!

      It is very interesting to know that it is possible to use Grunt with IDE web.

      In our case, we work with Gulp because we use it in other developments.

      Author's profile photo Frank He
      Frank He

      good