变脸式应用 / H5应用优化
来源:互联网 发布:各种编程语言图标 编辑:程序博客网 时间:2024/04/28 21:03
目前我们运行的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_THISWEBCC_CMD mergePage -minify yes page/home.html page/login.html page/login1.html page/me.htmlWEBCC_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中则优先使用内置页,否则就触发缺页中断从而远程加载。
- 变脸式应用 / H5应用优化
- 变脸式应用 / H5应用发布上线
- 变脸式应用 / 创建多个H5应用
- 变脸式应用
- 变脸式应用 - 逻辑页
- 变脸式应用 - 常用组件
- 变脸式应用 - 进入与退出应用
- 变脸式应用 - 调用后端接口
- 变脸式应用 - 常用组件(二)
- 变脸式应用 / 分页列表框架
- 变脸式应用 / 制作原生APP
- 变脸式应用 / 进入与退出应用(二)
- jdcloud-m(筋斗云) 变脸式单网页应用框架
- 变脸式应用 / 分页列表框架(二)
- 变脸式应用 / 分页列表框架(三)
- 变脸式应用 / 分页列表框架(四)
- 变脸式应用 / 会话重用与自动登录
- 变脸式应用 / 制作原生APP(二)
- C++ vector(向量)动态数组
- 摸不到,又离不开的ARM Cortex-R系列
- Vim配置
- 对无边框的QT窗体设置点击任务栏按钮最小化和还原事件
- 用Gitlab进行强制代码Review
- 变脸式应用 / H5应用优化
- ubuntu 12.04 提高更新网速的方法
- 变脸式应用 / 创建多个H5应用
- 关于printf()输出函数的一些用法
- Android核心技术之(4)---数据存储
- vim之tags
- Spark原理解析
- JSTL---core标签库
- 变脸式应用 / H5应用发布上线