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环境)，运行命令：

上面server是待编译的开发版本目录，里面有所有开发的内容。运行后生成发布版本目录"output_web"。
如果项目未使用git管理，则要求指定源文件列表，在运行webcc之前

必须先设置环境变量WEBCC_LS_CMD，例如：

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

<

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

至于编译生成的发布目录和源目录有哪些不同，下面将讲述。
webcc配置解读

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

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

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

先看外部库、内部库，它们分别被放置在标记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中则优先使用内置页，否则就触发缺页中断从而远程加载。

创新互联网络十年从事网站建设、成都微信开发、APP开发等业务，为众多企业搭建了自己公众号，简单方便用户管理。我们以科学规范的流程，勤奋专注的态度，为客户提供全方位的设计服务。专注ui设计，以设计驱动企业价值的持续增长，实现您的商业目标！

网页名称：H5应用优化
分享URL：https://www.cdcxhl.com/news/70029.html

成都网站建设公司_创新互联，为您提供虚拟主机、品牌网站制作、外贸网站建设、网站设计、网站策划、企业建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联