如何在混合应用上优化静态资产答案

【问题标题】：How to optimize Static Assets on an Hybrid App如何在混合应用上优化静态资产
【发布时间】：2015-03-19 21:35:52
【问题描述】：

我有一个使用 Backbone.js 和大约 20 个供应商库（JQuery、Paper.js、...）的混合 Web 应用程序。这个 web 应用直接在不同的浏览器上使用，在 Android 的 webview 和 iOS 的 webview 中（不是最新的 iOS webview WKWebView）。

我尝试优化静态资产交付以避免 iOS 和 Android 应用程序中的延迟。在生产中，我创建了 3 个捆绑包： - 1 个用于我的 JS 文件 (383kB) - 1 个用于所有供应商 JS 文件 (918kB) - 1 个用于我的 CSS 文件和供应商 CSS 文件 (209kB)

每个包都被缩小和版本化。

我想知道直接使用他们 CDN 中的供应商文件还是使用我的 CDN 中的大型供应商捆绑包更有效？

通过从我的 CDN 提供 3 个捆绑包，我减少了请求数量，但加载和解析这个巨大的文件需要时间。
通过从他们的 CDN 调用每个供应商，我为每个文件发出 1 个请求，但大多数访问者已经在内存中拥有 JQuery 和其他一些库，因此他们不会再次下载它。

优化 Webview 的最佳方法是什么？

【问题讨论】：

首次加载应用时，您应该利用 AppCache API 在本地存储所有这些资产。

标签： android ios performance backbone.js webview

【解决方案1】：

您可以像处理针对移动设备优化的常规网页一样处理这种情况。首先，如果您的目标受众是移动设备，那么您的 JS 和 CSS 资产约为 1.5MB 就很高了。旧设备不仅解析 JS 和 CSS 速度较慢，网络延迟也是一个问题。如果可能的话，尽量减少你使用的库的数量。例如，您可能不需要所有的 JQuery，并且可以使用像 zepto.js 这样的较小的库。

您的访问者可能只会在他们的缓存中拥有最流行的库（jQuery、Backbone 等）。无论如何，可能需要加载更多利基库，例如 Paper.js。最重要的是，您将需要使用多个 CDN 来交付您的内容，因为像 Paper.js 这样不太受欢迎的库不会托管在 Google 或类似网站上。这意味着您依赖于更多的第三方。因此，在这种情况下，我将从您自己的服务器上为您的所有资产提供服务。最好你可以从像 Cloudfront 这样的 CDN 提供文件。

【讨论】：