变脸式应用 : H5应用优化

来源:转载

目前我们运行的H5应用直接是在项目下的server目录中,这称为开发版本,没有进行优化。 在生产环境下,一般会将开发版本进行优化,生成发布版本后上线,可提升H5应用性能。


用webcc编译H5应用
[任务]

使用webcc工具,编译项目下的server目录,生成发布版本目录"output_web"。


作为一个WEB应用,发布时最常见的需求是JS/CSS/HTML文件合并和压缩(minify)。 H5应用自身用的index.js/index.css文件可以内嵌到主文件index.html中,常用的逻辑页面(包括html/css文件)也可以内嵌到index.html中来。


筋斗云通过名为webcc的工具进行应用优化,也称为编译。 本章详细介绍可参考官方文档"webcc"。


我们先看怎么运行它。 webcc是php工具,必须先安装php环境(版本5.4或更高); 在Windows系统上,建议安装git,它自带的git-bash环境模拟了简单的linux/unix环境,如果已安装mingw或cygwin也可以。


webcc一般要求源代码使用git管理,通过git命令查询源文件列表及版本差异,实现增量编译、自动化发布等功能。 如果你已用git管理项目,则在项目目录中打开git-bash(或其它linux shell环境),运行命令:


$ php tool/webcc.php server

上面server是待编译的开发版本目录,里面有所有开发的内容。运行后生成发布版本目录"output_web"。


如果项目未使用git管理,则要求指定源文件列表,在运行webcc之前必须先设置环境变量WEBCC_LS_CMD,例如:


$ export WEBCC_LS_CMD='find . -type f'

注意:上面命令会将目录下所有文件都编译并发布,应确保清除目录下无用的文件。 如果你使用的是svn管理项目,则需要把".svn"目录过滤掉以免生成到发布目录:


$ export WEBCC_LS_CMD='find . -type f | grep -v .svn'

或者使用svn命令精确列表哪些文件要发布:


$ export WEBCC_LS_CMD='svn ls -R'

至于编译生成的发布目录和源目录有哪些不同,下面将讲述。


webcc配置解读


在示例应用的server目录下,有一个webcc.conf.php
的配置文件,里面定义了优化策略,一般无需修改:


$RULES = [
'*.html' => 'HASH',
...
];

第一条规则是server目录下(不包括子目录)的所有html文件,即所有H5应用,执行HASH规则,对于html文件,会处理其中的webcc标记。



在示例应用中,我们在index.html中查找webcc
,可以看到有这些标记:


<!-- WEBCC_BEGIN MERGE=lib 外部库 {{{-->
<link rel="stylesheet" href="lib/weui.min.css" />
<script src="lib/jquery-1.11.1.min.js"></script>
<script src="lib/jquery.touchSwipe.min.js"></script>
<!-- WEBCC_END }}}-->
<!-- WEBCC_BEGIN MERGE=lib-app 内部库 {{{-->
mui.css, app.css等css文件...
app_fw.js, app.js等js文件...
<!-- WEBCC_END }}}-->
<!-- WEBCC_BEGIN MERGE 应用专用 {{{-->
<link rel="stylesheet" href="index.css" />
<script src="index.js"></script>
<!-- WEBCC_END }}}-->
...
<!-- WEBCC_BEGIN {{{ embeded pages -->
<!-- WEBCC_USE_THIS
WEBCC_CMD mergePage -minify yes page/home.html page/login.html page/login1.html page/me.html
WEBCC_END }}} -->


先看外部库、内部库,它们分别被放置在标记WEBCC_BEGIN MERGE=xxx / WEBCC_END
之中。 这意味着其中的css, js文件会被合并到一起,压缩后生成一个文件xxx.js或xxx.css。


外部库表示第三方库,如果应用中用到了其它库,且文件大小并不大,可以放置到这一块中,以便多个库合并成一个文件优化下载。 内部库是筋斗云框架自身及你的项目内所有H5应用的通用部分(app.js, app.css)。


应用专用就是当前H5应用用到的js/css。使用的webcc标记与前面比,没有指定"MERGE=xxx",只指定了"MERGE",这表示合并其中内容到当前文件,即把index.css/index.js内嵌到index.html文件中。


最后一块是内嵌逻辑页,用"WEBCC_USE_THIS"标记和"mergePage"命令指定了一些逻辑页,这些页面一般是最常用的页面,这个html及其引用的js文件将被直接内嵌到index.html中。 框架在加载逻辑页时,如果发现已内置于主html中则优先使用内置页,否则就触发缺页中断从而远程加载。


分享给朋友:
您可能感兴趣的文章:
随机阅读: