HTML5应用性能调优工具WAPA – 安装篇

转载； http://software.intel.com/node/506559

 

HTML5应用性能调优工具WAPA – 安装篇

Submitted by Dawei Cheng 程大伟... on Thu, 02/27/2014 - 00:51

 

1.     下载并安装node.js

(1)     下载稳定版本Node.js(node-v0.8.14), 地址：

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)     双击进行node安装，可以安装默认进行安装，不需要手动添加环境变量。更多的安装和下载信息可以在http://nodejs.org/download/ 上找到。

(3)     安装完毕之后，cmd ->  node –v

输出版本号，则成功。

2.     下载WAPA

(1)     从https://github.com/webperf/WAPA 上使用github或者直接下载 WAPA 文件。

a.       使用github方式：

在git bash中 输入git clone https://github.com/webperf/WAPA 命令，

 

Git完成之后，将得到一个名为WAPA的文件夹, 里面包含有下列WAPA文件：

 

b. 使用直接下载方式：

点击https://github.com/webperf/WAPA网页右侧的按钮，下载完将得到，解压该文件得到WAPA-master文件夹，该文件夹中包含与a步骤下载的相同的WAPA文件。

 

3.      下载WAPA用到的Node.js模块

  在命令行使用 “ npm install 模块名” 的命令，下载下列11个Node.js模块：cssom, esprima, htmlparser, jessie, msexcel-builder, readdirp, underscore, express, temporary, unzip 和 wrench.

例如 安装cssom模块：

输入命令之后，node便会自动下载模块。下载成功会提示：

你可以使用 npm root 命令查看你下载的模块的存放位置。

   

如上图，下载的模块就被放在了这个路径下。下载成功后该目录下就会多出一个 cssom文件夹，或者任意与你下载的模块同名的文件夹。

 

4.     配置WAPA

(1)     在YOUR-WAPA-ROOT 下 新建一个名为“node_modules” 的文件夹，注意此文件夹名不可改变。YOUR-WAPA-ROOT是你的WAPA文件所在的根目录。

(2)     复制上面第2步中下载好的前7个模块，（即：cssom, esprima, htmlparser, jessie, msexcel-builder, readdirp 和 underscore 模块）到此新建的文件夹中。

(3)     在YOUR-WAPA-ROOT\ server 文件夹下 新建一个名为“node_modules” 的文件夹，注意此文件夹名不可改变。

(4)     复制上面第2步中下载好的后四个模块，（即：express, temporary, unzip 和 wrench.）到此新建的文件夹中。

 

5.     使用WAPA

WAPA有两种使用方式：命令行方式和web浏览器方式。

 

(1)     web浏览器方式.

a.       通过 "node YOUR-WAPA-ROOT\server\app.js" 命令运行sever文件夹下的app.js文件，启动服务器。

显示 Listening on port 8888则启动WAPA服务器成功。

b.       浏览器中输入localhost:8888,进入欢迎界面。

c.       将你需要分析的HTML5项目打包成压缩文件，然后拖拽至欢迎界面的虚线框处。WAPA便会自动对压缩的项目进行分析。

d.       等待分析完毕，进入结果显示界面。包括分析的文件列表，文件中的代码，以及分析结果

e.       默认的是显示的ie10平台下的分析结果，可以通过点击下图所示的导航栏的平台选项来显示对应平台的分析结果。。

               

f.        点击最左侧Filelist中的文件名，会在中间code区域显示对应的代码，在message中显示分析结果。

g.       点击最右侧Message列表中的任意一条message，会自动在code区域代码中找到相应的代码行，并且会弹出更详细的分析结果（包括example和speedup等）。 当更换点击的message时，前一条的详细分析结果隐藏，该条的详细分析结果显示。

           

h.       导航栏Reports下拉列表中记录的是之前分析过的文件的分析结果。点击任意一个，显示对应的分析结果。

 

(2). 命令行版本：

 

a.       使用下列命令： 

        node YOU-WAPA-ROOT\main.js PROJECT-ROOT

来通过Main.js 分析你的项目，其中PROJECT-ROOT 是你要分析的项目的根目录。如：你要分析C盘下名为Example项目，则PROJECT-ROOT就是：C:\ Example

分析结束出现，congratulations….等文字。

 

b.       分析结果以xml文件的形式，被存放在项目所在文件夹的中。默认的名字为 。结果被分列存放在其中。

Categories: 

• HTML5 
•  JavaScript* 
•  HTML5 
•  Developers 
•  Partners 
•  Students 
•  Android* 
•  Microsoft Windows* 8 
•  Tizen* 
•  Beginner

Tags: 

• HTML5 Tools