javascript - 如何处理作为 ES6 模块导入的 JavaScript 文件的缓存

Question

旧情

以前，如果有可用的新版本，我使用以下方法强制浏览器重新加载我的 JavaScript 文件。

<script src="common.js?version=1337"></script>
<script src="app.js?version=1337"></script>

我的 HTML 是自动生成的(例如使用 PHP)，因此很容易实现自动化。

新情况

现在我想使用 ES6 模块并导入我的常用代码。 我的 HTML 变成:

<script src="app.js?version=1337" type="module"></script>

app.js 包含导入:

import {foo, bar} from './common.js';

问题

现在我的问题是:在新场景中如何影响 common.js 的缓存？

我不想在每次编辑 common.js 时都手动编辑 app.js。如果可能的话，我也不想动态生成/预处理我的任何 JavaScript 文件。

Answer 1

简短版本:

只需使用 Webpack , 你可以继续做你的把戏，因为所有的 javascript 都在一个文件中。

长版:

你说你不想预处理你的 javascript 文件。我会重新考虑这种立场。大多数现代网络应用程序(及其相关框架，如 React、Angular、Vue.js)都是使用某种预处理器/打包器构建的，它将应用程序的所有 javascript 捆绑到一个或多个文件中。

这样做有很多很好的理由，我们不需要在这里完全重复，但简而言之，您可以进行类型检查(例如 TypeScript)、linting、tree-shaking、优化、混淆和容易压实。

捆绑的 javascript 通常更小(大幅度)、更快、更正确。它可以缩短加载时间并减少带宽使用，这在当今超过 50% 的网络流量来自移动设备时尤为重要。

虽然这可能有点学习曲线，但这是我们行业的发展方向，并且有充分的理由。之所以没有一种简单的方法在 ES 模块中包含缓存破坏查询参数很重要，可能是因为该语言的设计者认为这是一种反模式。