GX博客

在 web 应用中，前端资源的存储方式、加载速度和缓存策略十分重要。因为没有一个用户愿意等待一个加载缓慢的网站。本文将从多个角度分析有关前端资源部署的问题。

前端资源的部署会考虑到什么？

• 版本控制与缓存
• 高可用性
• 服务器负载能力
• 加载速度
• 自动化部署流程

版本控制与缓存

web 应用的缓存如果按缓存的端点划分，可以分为客户端缓存和代理端缓存。若按缓存策略来划分，可以分为强缓存和协商缓存。而客户端缓存基本是通过 http 协议和浏览器特性来实现。

与缓存相关的响应标头包括：

• cache-control（缓存策略，是否可被中间代理缓存等）
• expires（缓存有效截止时间，优先级比 cache-control 的 max-age 低）
• etag（资源版本标识符，当缓存不可用后客户端将 etag 标识符以 if-none-match 请求头方式发送回服务器端验证）
• last-modified（资源上次更新时间，客户端将时间以 if-modified-since 请求头方式发回服务器端验证。）

浏览器缓存相关特性包括：

• Storage
• Cookie（它也是 http 协议的一部分）
• Service worker
• IndexedDB

对于应用程序的前端资源版本控制，我们应当保证以下两点：

• 客户端能够始终（或者尽可能快地）获得最新版本的资源。
• 当应用程序回滚时，旧版本的前端资源依然可用。

参考方案：

1. html 资源不作缓存，或者使用 etag 协商缓存。
2. css、javascript 和应用程序图片等资源使用 cache-control 的 max-age 进行长期的强缓存。
3. 资源通过 webpack 等打包工具根据内容生成带有哈希值的文件名称，以确保前端能够请求到最新版本的资源。
4. 将不同版本的前端资源保存在分布式部署的容器镜像中，或者上传到云端 OSS 对象存储并最终供 CDN 服务加速（一般需要额外费用），以确保应用程序回滚操作时，对应版本的前端资源依然可用。
5. 其它数据根据实际情况使用浏览器缓存特性，以提供用户体验。

幸运的是，上面大部分过程都可以结合 Webpack、Jenkins 和云供应商提供的 OSS 命令行工具镜像等实现自动化流水线部署。

高可用性

前端资源的高可用性可以理解为当部分集群节点发生故障时，前端资源依然能够被正常访问。上面提及的保存在分布式部署的容器镜像中，或者基于云 OSS 对象存储的 CDN 服务都可以保证高可用性。

服务器负载能力

要提高服务器端对前端资源的负载能力，需要考虑两方面因素：

• 使用恰当的客户端缓存策略，尽可能少地请求服务器，尤其是对这种不经常变化的前端资源。
• 使用可扩展的分布式负载方案，不要让你的架构存在不可扩展的瓶颈。在这里，Kubernetes 和云 OSS + CDN 是不错的选择。

加载速度

前端资源的加载速度主要受以下因素影响：

• 是否使用缓存
• 资源的大小
• 服务器端的数据压缩级别、算法和处理能力
• 网络带宽、地域距离等网络因素

参考方案：

1. 客户端缓存优先。
2. 使用 webpack 等打包工具对前端资源进行压缩、合理分包和添加文件名称哈希值。较少使用的大体积资源使用懒加载。前端上结合资源预加载以提高用户体验。
3. 服务器端根据 CPU 处理能力对响应数据进行 brotli（非常适合于文本压缩，且压缩率更高）或者 gzip 压缩。合理调整代理缓冲大小，避免响应数据写入临时的硬盘文件中。
4. 根据项目成本，选择尽可能高的带宽流量套餐和 CDN 服务。

对于 brotli 压缩算法，Nginx 需要安装第三方模块来实现，请点击这里查看官方文档说明。
在 Node.js 的 koa2 Web 框架中可以使用koa-compress，它的首选算法就是 brotli。

自动化部署流程

如前所述，上述大部分过程都可以结合 Webpack、Jenkins 和云供应商提供的 OSS 命令行工具镜像等实现自动化流水线部署。下面为一些参考工具：

• webpack-cdn-plugin，与 html-webpack-plugin 结合处理开发和生产环境下 CDN 资源的引用问题。
• Webpack 的外部扩展配置，externals。
• aliyuncli-python-toolbox，阿里云 CLI 工具官方镜像，其中包括用于云 OSS 对象存储的 ossutil。

以上就是前端资源的存储压缩和缓存方案分享的全部内容。不管怎样，调整和优化都应以具体用户体验为准。