web - 如何在 es6 中缓存 bust 导入的模块？

Question

ES6 模块允许我们创建一个单一的入口点，如下所示:

// main.js

import foo from 'foo';

foo()

<script src="scripts/main.js" type="module"></script>

foo.js 将存储在浏览器缓存中。在我推送 的新版本之前，这是可取的。 foo.js 到生产。

通常的做法是添加具有唯一 id 的查询字符串参数以强制浏览器获取新版本的 js 文件 ( foo.js?cb=1234 )

使用 es6 模块模式如何实现这一点？

Answer 1

我所做的是处理网络服务器中的缓存破坏(在我的实例中为 nginx)
而不是服务

<script src="scripts/main.js" type="module"></script>

像这样服务它，其中 123456 是您的缓存破坏键

<script src="scripts/123456/main.js" type="module"></script>

并在 nginx 中包含一个位置，例如

location ~ (.+)\/(?:\d+)\/(.+)\.(js|css)$ {
  try_files $1/$2.min.$3 $uri;
}

请求 scripts/123456/main.js 将提供 scripts/main.min.js 并且对 key 的更新将导致提供新文件，此解决方案也适用于 cdns。