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

Posted 2023-02-22

【中文标题】如何处理作为 ES6 模块导入的 JavaScript 文件的缓存

【英文标题】：How to handle caching of JavaScript files imported as ES6 module

【发布时间】：2018-02-07 04:44:25

【问题描述】：

旧情况

之前，如果有新版本可用，我使用以下方法强制浏览器重新加载我的 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 文件。

【问题讨论】：

服务工作者可用于处理模块请求。原生 ES 模块实现不处理这些事情，这就是为什么捆绑工具在生产中仍然没有替代品。

我写过并回答了你可能对这个类似的问题感兴趣***.com/a/56801858/210090

【参考方案1】：

短版：

只需使用Webpack，您就可以继续使用您的技巧，因为所有的 javascript 都将在一个文件中。

加长版：

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

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

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

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

【参考方案2】：

ES6 模块可以导入输出有效 JS 的 PHP 文件。只要您还设置了正确的标题，就可以了。

所以您的index.php 文件将包含：

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

您的app.js.php 文件将包含：

<?php
  header("Content-Type: application/javascript");
  $version = 1337; // Probably imported form some config file;
?>
import foo, bar from './common.js.php?version=<?=$version?>';

【讨论】：

此解决方案假设您使用 php 发出 js 文件。我很想看到静态 js 文件的解决方案。

没有“导入 PHP 文件”。 PHP 在远程 HTTP 服务器上运行，生成 HTTP 响应，这是一个有效的 JavaScript 文本，最终实际被导入。我知道您可能并不是要暗示 ES6 实际上允许导入 PHP 代码，但重要的是要注意某人可能从您的答案中读到的内容与 HTTP 开发人员绝对显而易见的内容之间的区别（Web 开发人员应该努力做到这一点） ，在我看来）——HTTP 服务器可以随意生成任何响应，无论是通过调用 PHP 还是通过其他方式。