应用之间的块共享

Question

目标是在多个应用程序之间共享和缓存Webpack块。

场景：

1. 一个应用程序通过使用import创建和使用块：

import(/* webpackChunkName: "AAA" */ './AAA').then((AAA) => { […] });

1. 然后，另一个应用程序应该能够使用以下内容加载并使用相同的块：

customImport('/path/on/server/to/AAA.7adf75a1.chunk.js').then((AAA) => { […] });

---

想法

通常，通过chunkId中的requireEnsure函数使用webpack/bootstrap s加载块。

为了重用大多数Web Pack逻辑，我的想法是通过创建id替换来直接将源路径用作customRequireEnsure：

script.src = __webpack_require__.p + "static/js/" + ({"0":"AAA","1":"BBB"}[chunkId]||chunkId) + "." + {"0":"7adf75a1","1":"cb8dc745"}[chunkId] + ".chunk.js";

具有：

script.src = chunkId;

---

问题

这样，脚本插入可以正常工作。新的脚本标签以正确的src出现在文档的头部。但是，由于installedChunks[chunkId]为空，JSONP回调似乎无法正确触发。这导致new Error('Loading chunk ' + chunkId + ' failed.')。我假设还必须采用window["webpackJsonp"]回调才能使用“新” chunkId。

---

问题

• 这种自定义导入功能的外观如何，以便在运行时无缝地适合webpack模块？
• 在这种情况下，重用大多数Web Pack逻辑是否有很好的选择？

---

注意

• 两个应用程序都在代理服务器后面的同一服务器上运行，例如：

  • http://domain/app1
  • http://domain/app2

• “缓存”是指本机的“浏览器缓存”。