IBM Support

Apply a Vulcanize Script to Improve Work Center Performance

How To


Summary

Vulcanize script helps to improve the initial load speed of work center by joining multiple tiny JavaScript files and combine them into a single file in order to reduce the number of network requests.

Objective

Reducing network requests is important for a performant app experience. Vulcanize tool helps to concatenate a set of elements and their HTML imported dependencies into a single file.  Vulcanize recursively pulls in all your imports, flattens dependencies, and spits out something that can reduce the number of network requests from the application.

Environment

Maximo 7.6.1.x
Work Center 7.6.x

Steps

The steps need internet access to run on a MacOS:
 
1) Log in to the server as root user
2) Nodejs installation
Open a terminal session  
Navigate to the NodeJS installation folder
Type command to show the version
node --version
  
Follow the instructions to install Git
4) Run command
npm install -g bower
If you are running a Mac or Linux, try running command
sudo bower install css-circle-menu --allow-root
5) Run command:
npm install -g polymer-cli
6) Run the same command with sudo 
sudo npm install -g polymer-cli --unsafe-perm=true --allow-root
Wait for the installation to complete
-----
selenium-standalone installation finished
-----
+ polymer-cli@1.9.11
added 1633 packages from 1733 contributors in 84.062s
7) Run command:
npm install -g vulcanize
Run command with sudo 
sudo npm install -g vulcanize --unsafe-perm=true --allow-root
8)  Navigate to the script folder
ibm/smp/maximo/applications/maximo-x/script
enter cd in the terminal session
drag the script folder from folder to the terminal session
9) Run command to make a copy called maximo-module-original.html
cp maximocomponents/maximo-module/maximo-module.html maximocomponents/maximo-module/maximo-module-original.html
10) Run vulcanize script
vulcanize --inline-scripts --inline-css maximocomponents/maximo-module/maximo-module-original.html --exclude=./components/polymer/ --exclude=tinymce/tinymce.min.js --exclude=plotly/dist/plotly.min.js --out-html maximocomponents/maximo-module/maximo-module.html
NOTE:  maximo-module.html grows in size
ibm\applications\maximo-x\script\maximocomponents/maximo-module
For example, file size changes from 1.5KB to 6.8MB
11) Run the buildmaximo-xwar.bat (windows) or buildmaximo-xwar.sh (linux) from 
ibm/smp/maximo/deployment directory
Deploy the work center file
RESULTS: Initial load to the work center takes around 30 seconds now

Additional Information

If it is not possible to install vulcanize tool on a production server machine, then the workaround would be to install the tool on a test machine. 
Copy the generated compressed maximo-module.html to the server machine
ibm/smp/maximo/applications/maximo-x/script/maximocomponents/maximo-module
Rebuild and redeploy work center file.
Log in to Maximo, navigate to Work Execution application and check performance.

Document Location

Worldwide

[{"Type":"SW","Line of Business":{"code":"LOB59","label":"Sustainability Software"},"Business Unit":{"code":"BU059","label":"IBM Software w\/o TPS"},"Product":{"code":"SSLKT6","label":"IBM Maximo Asset Management"},"ARM Category":[{"code":"a8m50000000CbPMAA0","label":"Work Centers"}],"ARM Case Number":"TS005419849","Platform":[{"code":"PF025","label":"Platform Independent"}],"Version":"All Version(s)"}]

Document Information

Modified date:
15 November 2023

UID

ibm16446949