0
点赞
收藏
分享

微信扫一扫

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



 

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.     下载WAPA

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

a.       使用github方式:

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

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

 

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

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

 

b. 使用直接下载方式:

 

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

cssom, esprima, htmlparser, jessie, msexcel-builder, readdirp, underscore, express, temporary, unzip 和 wrench.

例如 安装cssom模块:

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

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

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

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

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

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

   

 

4.     配置WAPA

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

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

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

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

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

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

 

5.     使用WAPA

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

 

(1)     web浏览器方式.

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

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

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

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

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

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

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

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

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



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



  • HTML5 Tools
举报

相关推荐

0 条评论