Javascript 微型前端-如何动态加载包含哈希的URL

因此，我的公司正在为我们的应用程序使用微型前端架构。这是我在这里开创的一个项目，到目前为止已经相当成功。然而，我希望就我们面临的一个突出挑战获得一些建议

使用Webpack构建JavaScript应用程序时，其中一个选项是向URL添加哈希。此哈希是在每次生成时生成的，因此只有当文件本身发生更改时，哈希才会更改。因此，文件名如下所示：

app.ab12cd.js

这样做的好处是浏览器缓存。浏览器将尝试缓存内容，以避免消耗太多数据。因此，如果它再次看到相同的文件名/URL，它将只使用缓存版本，而不是重新下载。由于文件名中的哈希值只有在文件经过更改后重新构建时才会更改，因此我们可以安全地依靠浏览器缓存此文件来减轻用户的在线下载负担，同时仍然相信用户将始终看到最新的更改

这对我们的微型前端架构是一个挑战。指导原则之一是每个微前端都可以单独发布，这意味着基本应用程序（即用户导航到的初始应用程序）和它将加载的微前端应用程序之间没有直接依赖关系

我们通过简单的静态标记来实现这一点。每次添加新的micro前端时，我们只需更新基础应用程序一次即可添加新标签：

<script src="micro-frontend/assets/js/app.js"></script>

在上面的示例中，使用nginx代理将该URL重定向到实际部署的微前端。这是一个相对的URL，涉及到我们的公司基础设施，这是一个愚蠢和令人沮丧的原因，但这完全是另一回事

主要的一点是，您会注意到它指向的是“app.js”，而不是“app.12ab34.js”。我们不使用哈希，因为我们不希望每次微前端更改时都更新基础应用程序。相反，我们返回一个缓存控制头，以防止micro前端的任何浏览器缓存

这也不理想，因为在我们获得独立性的同时，我们放松了微前端代码的缓存

那么，我的问题是：如果我们要在micro前端的文件名中启用哈希，有没有一种方法可以将基础应用程序设置为不需要更新哈希更改的位置？换言之，有没有一种完全不同的方式连接这些应用程序，而我还没有想到

---

非常感谢您。

您正在混合各种问题—缓存破坏和获取特定版本的软件包

您可能不想只为小的更新更新主应用程序，但最终您需要管理个人资产的版本。毕竟这就是为什么你可能要做微型前端的原因

实现这一目标有很多选择；有一个选项可以让您在发布包的新版本时灵活地不更改主应用程序，这就是使用反向代理，这就像unpkg.com连接到您的工件库（例如npm注册表）：

• ->

  unpkg.com/：package@:version/：file

  如果采用这种模式，不仅可以更新版本，还可以获得语义版本控制的好处。您可以同时发布次要更新和主要更新，而不会影响您的主要应用程序

• 因此，
  将变成类似于

当然，您仍然需要提供适当的客户端缓存（即发送正确的头）

另一个选项是，您可以在运行时进行静态合成，而不是在主应用程序中进行静态合成：

• 从服务获取最新的组件列表（为了简单起见，package.json也足够了）
• 动态创建
  标记以加载组件

这将允许使用直接哈希，您不必担心客户端缓存破坏

当然，这两种方法也可以混合使用——为主应用程序生成一个构建时dep文件，我们称之为

package.json

，并动态加载该文件，动态生成

标记，将组件从与unpkg兼容的反向代理中加载

unpkg.com

的软件是开源的，可以很容易地调整为与您自己的私有npm注册表相关联

---

对于一个简单的PoC，您可以直接使用unpkg.com。

您正在混合关注点-缓存破坏和获取包的特定版本

您可能不想只为小的更新更新主应用程序，但最终您需要管理个人资产的版本。毕竟这就是为什么你可能要做微型前端的原因

实现这一目标有很多选择；有一个选项可以让您在发布包的新版本时灵活地不更改主应用程序，这就是使用反向代理，这就像unpkg.com连接到您的工件库（例如npm注册表）：

• ->

  unpkg.com/：package@:version/：file

  如果采用这种模式，不仅可以更新版本，还可以获得语义版本控制的好处。您可以同时发布次要更新和主要更新，而不会影响您的主要应用程序

• 因此，
  将变成类似于

当然，您仍然需要提供适当的客户端缓存（即发送正确的头）

另一个选项是，您可以在运行时进行静态合成，而不是在主应用程序中进行静态合成：

• 从服务获取最新的组件列表(