变脸式应用 / 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中则优先使用内置页，否则就触发缺页中断从而远程加载。