如何在混合应用程序上优化静态资产
How to optimize Static Assets on an Hybrid App
我有一个使用 Backbone.js 和大约 20 个供应商库（JQuery、Paper.js、…）的混合 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 的最佳方法是什么？
您可以像处理针对移动设备优化的常规网页一样处理这种情况。首先，如果您的目标受众是移动设备，您的 JS 和 CSS 资产大约需要 1.5MB。不仅旧设备解析 JS 和 CSS 更慢，网络延迟也是一个问题。如果可能，请尝试 trim 减少您使用的库的数量。例如，您可能不需要全部 JQuery 并且可以使用较小的库，例如 zepto.js.
您的访问者很可能在他们的缓存中只有最流行的库（jQuery、Backbone 等）。无论如何，可能需要加载更多小众库，例如 Paper.js。最重要的是，您将需要使用多个 CDN 来传送您的内容，因为 Paper.js 等不太受欢迎的库不会托管在 Google 等上。这意味着您依赖更多的第三方。因此，在这种情况下，我将从您自己的服务器上为您提供所有资产。最好你可以从像 Cloudfront.
这样的 CDN 提供你的文件
我有一个使用 Backbone.js 和大约 20 个供应商库（JQuery、Paper.js、…）的混合 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 的最佳方法是什么？
您可以像处理针对移动设备优化的常规网页一样处理这种情况。首先，如果您的目标受众是移动设备，您的 JS 和 CSS 资产大约需要 1.5MB。不仅旧设备解析 JS 和 CSS 更慢，网络延迟也是一个问题。如果可能，请尝试 trim 减少您使用的库的数量。例如，您可能不需要全部 JQuery 并且可以使用较小的库，例如 zepto.js.
您的访问者很可能在他们的缓存中只有最流行的库（jQuery、Backbone 等）。无论如何，可能需要加载更多小众库，例如 Paper.js。最重要的是，您将需要使用多个 CDN 来传送您的内容，因为 Paper.js 等不太受欢迎的库不会托管在 Google 等上。这意味着您依赖更多的第三方。因此，在这种情况下，我将从您自己的服务器上为您提供所有资产。最好你可以从像 Cloudfront.
这样的 CDN 提供你的文件