Detect unused UI5 libraries using a custom UI5 Tooling task

[pieterjanssens]

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, vobu and others for the inspirational "ui5 ecosystem showcase".