Technical Articles
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”.
Great idea. Will definitely implement it in my apps π thanks for sharing
Great blog. have already incorporated it into my build tasks!
Amazing, Pieter!
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 π
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
Hi Pieter,
nice post!
Btw: There is an issue with ui5.yaml snippet. This one should work better:
Thanks for catching that, Marius. Don't you think it's time to add YAML highlighting?
I fully agree!
i think that would be a good one for the Customer Influence app.
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
Voted π