十年专注于品牌网站建设 十年专注于品牌网站建设,低调、高逼格、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

H5应用优化

百恒网络 2017-03-16 183

       目前我们运行的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设计,以设计驱动企业价值的持续增长,实现您的商业目标!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×