Skip to Content
Technical Articles
Author's profile photo Pieter Janssens

Detect unused UI5 libraries using a custom UI5 Tooling task

In this blog I introduce you to my first custom UI5 Tooling task that will help you to detect unused UI5 libraries in your projects in order to reduce load times.

Introduction

During the development of a UI5 application, I might replace one type of UI5 element with another. I sometimes forget to remove the namespace of a UI5 library in the XML view or the dependency declared in the AMD style JavaScript module definition.

Functionally there is no harm, but the end user should not spend time waiting for libraries to be loaded that are never used. I looked for a tool that could help me quickly locate redundant library definitions in my UI5 source files and since I couldn’t find such a tool, I decided to create my own in the form of a custom UI5 Tooling task.

The tool is called ui5-task-librarian and in the next sections I’ll explain how you can get it up and running.

If you are not using UI5 Tooling already, please make yourself familiar and install the UI5 cli before following the instructions on the installation below.

Installation

From the root of your UI5 project run: npm i -D ui5-task-librarian

To make UI5 Tooling aware of the dependency add the dependency to the ui5 tooling dependencies in your ui5 package.json:

{
   "name":"demo",
   "devDependencies":{
      "@ui5/cli":"^1.14.0",
      "ui5-task-librarian":"*"
   },
   "ui5":{
      "dependencies":[
         "ui5-task-librarian"
      ]
   }
}

Add the build task to the ui5.yaml configuration:

builder:
  customTasks:
    - name: ui5-task-librarian
      beforeTask: replaceCopyright
      configuration:
        debug: false
        strict: true

Usage

Unused libraries will be reported in the output of the UI5 Tooling builder – i.e running ui5 build SAP and OpenUI5 libraries are reported at warning level, others at info level.

For example:

info builder:builder application skills πŸ”¨ (2/9) Running task ui5-task-librarian...
WARN builder:customtask:librarian πŸ“š Unused UI5 library sap.ui.comp.smartform at /resources/com/pj/demo/view/App.view.xml
WARN builder:customtask:librarian πŸ“š Unused UI5 library sap.ui.comp.smartfield at /resources/com/pj/demo/view/App.view.xml
WARN builder:customtask:librarian πŸ“š Unused UI5 library sap.ui.layout at /resources/com/pj/demo/view/App.view.xml
WARN builder:customtask:librarian πŸ“š Unused UI5 library sap.suite.ui.microchart at /resources/com/pj/demo/view/App.view.xml
info builder:customtask:librarian πŸ“š Unused library or resource ./model/formatter at /resources/com/pj/demo/test/unit/AllTests.js
info builder:customtask:librarian πŸ“š Unused library or resource ./ObjectJourney at /resources/com/pj/demo/test/integration/AllJourneys.js
WARN builder:customtask:librarian πŸ“š Unused UI5 library sap/m/MessageBox at /resources/com/pj/demo/controller/App.controller.js

Configuration Options

strict (true|false)

Stop after running the task and redundant libraries have been detected.

For example:

info builder:builder application skills πŸ”¨ (2/9) Running task ui5-task-librarian...
WARN builder:customtask:librarian πŸ“š Unused UI5 library sap/m/MessageBox at /resources/com/pj/demo/controller/App.controller.js
ERR! builder:customtask:librarian πŸ“š The librarian is configured to be strict, please remove redundancies and rebuild.

debug (true|false)

Verbose logging to show all files that are scanned for unused libraries.

 

Final Words

I hope this tool can make your life a little easier in tracking down unused libraries to improve loadtimes.

Special thanks to the UI5 Tooling team for making such a great, extensible UI5 tools.

Special thanks to Peter Muessig, Volker Buzek and others for the inspirational “ui5 ecosystem showcase”.

Assigned Tags

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

      Great idea. Will definitely implement it in my apps πŸ™‚ thanks for sharing

      Author's profile photo Ravish Garg
      Ravish Garg

      Great blog. have already incorporated it into my build tasks!

      Author's profile photo Dipesh NaΓ―k
      Dipesh NaΓ―k

      Amazing, Pieter!

      Author's profile photo Manuel Filipe
      Manuel Filipe

      Hi, already incorporated it on my project, but i found that it only verify libraries on 1st level folders... Usually we have fragments inside structured folders and i realize that the task don't check those folder.

      That can be a improvement for a newest version.

       

      Great Work πŸ™‚

      Author's profile photo Pieter Janssens
      Pieter Janssens
      Blog Post Author

      Hi Filipe,

       

      I'm unable to reproduce your issue.

      Can you please open an 'issue' and provide the logs with task config 'debug' set to true?

      https://github.com/piejanssens/ui5-task-librarian

       

      Best regards,

       

      Pieter

       

      Author's profile photo Marius Obert
      Marius Obert

      Hi Pieter,

      nice post!

      Btw: There is an issue with ui5.yaml snippet. This one should work better:

      builder:
        customTasks:
          - name: ui5-task-librarian
            beforeTask: replaceCopyright
            configuration:
              debug: false
              strict: true
      
      Author's profile photo Pieter Janssens
      Pieter Janssens
      Blog Post Author

      Thanks for catching that, Marius. Don't you think it's time to add YAML highlighting?

      Author's profile photo Marius Obert
      Marius Obert

      I fully agree!

      i think that would be a good one for the Customer Influence app.

      Author's profile photo Pieter Janssens
      Pieter Janssens
      Blog Post Author

      YAML option for code blocks: https://influence.sap.com/sap/ino/#/idea/262893
      Syntax highlighting in SAP Q&A: https://influence.sap.com/sap/ino/#/idea/262895

      Author's profile photo Marius Obert
      Marius Obert

      Voted πŸ™‚