WAPA(Web Application Performance Analyzer) is a HTML5 application performance tuning tool, which statically analyzes HTML5 application's source code and provides recommendations for performance optimization. WAPA is capable for either Hybrid Android applications or pure web applications.
In this article, we will intorduce the installation guide and user manual of WAPA. Here are some step by step tut
1. Download and Install Node.js
(1) Download stable version of Node.js(node-v0.8.14) from :
32bit : http://nodejs.org/dist/v0.8.14/node-v0.8.14-x86.msi.
64bit : http://nodejs.org/dist/v0.8.14/x64/node-v0.8.14-x64.msi
(2)
Install it by double click the installer, it's recommended to use default settings, including PATH settings. More information about install NodeJS could be reached from http://nodejs.org/download/ .
(3) Open your command and type "cmd -> node –v" If installed successfully, the version of NodeJS should be showed.
2. Download WAPA
(1) WAPA is an open source project, users could download and using it freely form https://github.com/webperf/WAPA either witm Giubash or zip package.
a. Using GitBash to download WAPA
Open git bash and type "git clone https://github.com/webperf/WAPA "
All WAPA files listed as below :
b. Directly download Zip file ：
Clickat the riigt of page https://github.com/webperf/WAPA to download WAPA Zip package
and then upzip the package, you would get the same files as above.
3. Download Node.js Modules
Open the command and type“ npm install Module-Name". There are 11 modules need to be installed, it includs: cssom, esprima, htmlparser, jessie, msexcel-builder, readdirp, underscore, express, temporary, unzip and wrench.
For examples, install cssom module:
And then, it will download automatically, Install steps of other modules are same as cssom
These modules' location could be presented with command "npm root"
![]()
As showed above, node modules are located at
4. WAPA Configuration
(1) Create folder "node_modules" in YOUR-WAPA-ROOT, YOUR-WAPA-ROOT is the root folder of WAPA project.
(2) Copy the above 7 of 11 modules in download folder "node-modules" to "YOUR-WAPA-ROOT/node_modules". the 7 modules are cssom, esprima, htmlparser, jessie, msexcel-builder, readdirp and underscore.
(3) Create folder "server/node_modules" in YOUR-WAPA-ROOT, Please do not change the folder name.
(4) Copy the other 4 of 11 modules in download folder "node-modules" to "YOUR-WAPA-ROOT/server/node_modules". The four modules includes: express, temporary, unzip and wrench.
5. WAPA Manual
WAPA supports two modes: Web browser mode and Command mode.
(1) Web Browser mode
a. Type "node YOUR-WAPA-ROOT\server\app.js" to start the server. If the server started successfully, it will showed "Listening on port 8888" in command.
b. And then open your browser and type http://localhost:8888, WAPA web browser mode is ready for you.
c. As showed in the above figure, package your HTML5 application and then drag it to the dashed rectangle.
d. When analyze finished, it will show the results as below
e. Performance optimization suggestions is default based on IE platform, you could swith to Firefox and Chrome if needed. Chrome platfrom is advisable for Android hybrid application
![]()
f. The left side of the page is filelist, click on each file, the performance suggestions would be showed in the right side, at the same time, souce codes located in the middle part.
(2). Command line mode.
a. Type command:
node YOU-WAPA-ROOT\main.js PROJECT-ROOT
PROJECT-ROOT is your web application project folder. For example, if your project is in C:\ Example, type;
node YOU-WAPA-ROOT\main.js C:\Example
Please wait until it says "Congratulations, WAPA analysis have completed successfully"
![]()
b. Analyze result is stored in PROJECT-ROOT entitled as
. It is showed as below.