我正在尝试优化我的 webpack 包大小。查看我的供应商捆绑包，最大的部分是 ReactDOM + React。
我想我可以利用 webpack 的 externals 配置选项让 CDN 为这些资产提供服务，就像我目前使用 jQuery 所做的那样。我检查了一下，我的个人浏览器没有缓存这些资产，所以我开始怀疑其他人是否会这样做。如果大多数人没有缓存这些资产，由于额外的往返行程，从外部加载它们弊大于利。
有人知道用于检查资产当前是否被缓存的跨浏览器解决方案吗？这样我就可以对我的用户群进行一些分析，看看将这些更大的资产外部化是否是一个好的举措。
我见过适用于大多数现代浏览器的Cache API。不过，我仍然需要 Safari/IE 的解决方案。
【问题讨论】：
标签： javascript caching optimization webpack cdn
您可以使用Resource Timing API 来查找所有已加载的资源，并使用每个资源的transferSize 属性来了解它是否从缓存中加载。传输大小为 0 表示缓存加载。任何大于 0 的值都表示通过网络进行实际传输，因此是未缓存的资源。
const resourcesStatus = window.performance.getEntriesByType('resource')
.reduce(function(formattedOutput, resourceDetails) {
return formattedOutput.concat({
resourceName: resourceDetails.name,
cached: resourceDetails.transferSize ? false : true
})}, [])
【讨论】：
由于script files are loaded in order 您可以在反应包括前后花点时间。如果该时间低于几毫秒，则它来自缓存，时间正是解析所需的时间，否则它是从服务器加载的，并且 ypu 有网络延迟：
<script>
var start = Date.now();
</script>
<script src="cdn/react.min.js" ></script>
<script>
var loadTime = Date.now() - start;
// Do whatever with that
if(loadTime < 10) alert("cached");
</script>
您可能会在浏览器速度非常慢和速度很快的用户中得到误报和误报
【讨论】：
Cache API，但您可能适合 Safari/IE。