综述

移动 App 的运行环境具有带宽不稳定，流量收费，启动速度比较重要等特点，所以混合 App 如何加载 Web 资源并不是一个新问题。本文目的是总结出一种资源打包下载的思路和方案，并且提供一种打包工具。本文提到的思路只是一家之言，基本没有参考现有方案，各位方家有不同意见欢迎留言。另外本文没有涉及到 App 内部如何加载资源的问题，这部分我会专门撰写一篇文章讨论。

需求梳理

一般来说，Hybrid-app 对于 Web 资源下载有如下需求：

页面开启速度要快，所以资源的下载和使用不是在同一时间进行的，有一个“预下载”的过程。

资源不能重复下载，所以要有缓存，但是有更新的时候必须及时更新。鉴于 WebView 的缓存可控性不强，所以要有一套自定义缓存机制。

为了节省流量加快速度，如果资源以压缩包为单位整体下载，那么资源更新时要支持增量更新。同时，对于设备端资源与最新版本相隔一个版本以上的情况，要提供全量更新。

为了维持一定的健壮性，Web 资源在设备本地和线上应各有一份部署，可以随时切换。尤其是当设备本地缓存被删除时，可以临时切换到线上。

资源打包方案

为了方便开发和部署，笔者设计了如下打包方案：

发布包分为四部分：

第一，是将整个 Web 资源目录打成一个压缩包(bundle.zip)。

第二，基于上一个版本，构建一个最新版本的增量压缩包(update.zip)。为了简化开发，我使用了文件级的 diff 算法——也就是说，对比两个版本的程序目录，将新增和有改动的文件连带目录结构打成压缩包。对于新版本中被删除的文件，本方案忽略，因为 Web 前端程序中多一个文件并不会有任何影响。

第三，整个 Web 资源目录以目录的形式存在于发布包中，目录名为 /web，当设备端本地资源不能用时，可以直接使用 Web 目录中的线上资源。另外，为了方便单步调试，调试版 App 也使用线上资源。

第四，版本信息文件 update.json，本次发布的版本号、上一个版本号，以及发布时间存在于这个文件中，供 App 定时下载检查。update.json 格式如下：

{"releaseTime":"160530161454","version":9601,"lastVersion":9596}

以上就是整个发布目录结构，将这个目录整体上传到后端云存储，提供下载链接，App 即可实现下载更新等功能。在暂时不用考虑 App 版本和 Web 版本配合问题的前提下，为了方便 App 开发，笔者使用了恒定不变的 URL，比如：

http://www.url_prefix.com/some_folder/webapp/app_name/update.json

http://www.url_prefix.com/some_folder/webapp/app_name/bundle.zip

http://www.url_prefix.com/some_folder/webapp/app_name/update.zip

http://www.url_prefix.com/some_folder/webapp/app_name/web/

这样做的好处是设计 App 时约定好 URL，这些 URL 就不会变了，App 只要定时拉取 update.json 检查版本，该更新更新即可，Web 资源发布时只要替换掉相应的文件即可，流程比较简化。这样的方案导致线上只有一个版本，所以如果你的项目中不同版本 App 需要不同版本的 Web 资源配合，那么你就不能使用这种方式。

资源打包工具

方案确定后，我们还需要一个打包工具，方便开发人员发布资源。显然，这个工具不能要求开发人员自己保留老版本目录，所以我们需要依托于版本控制工具。笔者使用 node.js 开发了一个基于 svn 的命令行打包工具 packr：

packr 的原理很简单：由发布人员确定发布项目的 svn 地址、本次要发布的 svn 版本号，以及上次发布的 svn 版本号，packr 会按照上面的方案将资源打成一个发布包。如果你用 git 的话，可以简单改一下底层的版本控制组件。这个工具本身和前端开发无关，你可使用它为任何项目打发布包。

packr 的使用说明如下：

静态资源打包工具(packr)使用说明

综述

packr 是专为移动 app 混合开发设计的 web 静态资源打包工具。

packr 通过比较两个 svn 版本的区别(目前还不支持

git)，将静态资源项目打包为全量更新包、增量更新包，以及线上资源目录，同时生成版本信息 update.json。

运行环境

packr 基于 nodejs 实现，使用前请先安装 nodejs。

packr 依赖的 npm 模块需要联网安装，请确保连入互联网。

packr 依赖 svn 命令行工具，使用前请安装 svn 并确保环境变量 Path 中有相关目录。

packr 没有 svn 账户设置入口，使用前请确保 svn 已经保存了可用的账户名。

packr 为命令行工具，使用前请确保环境变量 Path 中有 packr 根目录。

运行前准备

假设 packr 根目录为 /usr/local/packr

cd /usr/local/packr npm install

命令参数

packr 命令格式如下：

packr -p=${prefix} -c=${currentVersion} -l=${lastVersion} -r=${repositoryURL}

其中：

prefix 为输出目录，如果不设置，则输出于当前目录。

currentVersion 为当前发布版本的 svn 版本号。

lastVersion 为上一个版本的 svn 版本号。

repositoryURL 为 svn 版本库地址。

输出

packr 输出为一个 zip 压缩包，其中有如下文件或目录：

bundle.zip 新发布版本的全量更新包。

patch.zip 增量更新包，其中有新增和改动过的文件。

web 线上资源目录，供客户端或浏览器在不使用缓存时直接访问。

update.json 版本信息文件，其中以 json 格式记录了新版本和上一个版本的版本号。